Custom Button Popup on Detail Page Layout

There was a recent requirement in which we had to create a Custom Button which opened a Visualforce page in a dialog box. The visualforce page then rendered and rerendered components and other functionalities were attained with the the help of visualforce page. Which also made callouts and created a shipment record. 

{!REQUIRESCRIPT('/soap/ajax/26.0/connection.js')}
{!REQUIRESCRIPT('/js/functions.js')}
{!REQUIRESCRIPT('/resource/jQuery/jquery-ui/jquery-1.11.3.js')}
{!REQUIRESCRIPT('/resource/jQuery/jquery-ui/jquery-ui.min.js')}

requireCssFile('/resource/jQuery/jquery-ui/jquery-ui.min.css');

function requireCssFile(filename) {
    var fileref = document.createElement('link');
    fileref.setAttribute('rel', 'stylesheet');
    fileref.setAttribute('type', 'text/css');
    fileref.setAttribute('href', filename);
    document.getElementsByTagName('head')[0].appendChild(fileref);
}


var j$ = jQuery.noConflict();


var iframe_url = '{!URLFOR("/apex/[VisualForcePageName]")}'+'?id={!Opportunity.Id}' ;


var j$modalDialog = j$('<div></div>')
.html('<iframe id="iframeContentId" src="' + iframe_url + '" frameborder="0" height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="no" />')
.dialog({
autoOpen: true,
title: 'Shipment Details',
resizable: false,
width: 700,
height: 400,
autoResize: true,
modal: true,
draggable: false,
buttons: {
"Cancel": function() {
j$(this).dialog("close");
}
}
});

j$modalDialog.dialog("open");

Static Resource Used All necessary files are uploaded to the zip file.