CODEWITHSUNDEEP
javascriptjqueryiframemodal-dialogbootstrap-modal
Hasan Zubairi
Hasan Zubairi

Reputation: 1181

Javascript api to open an external page in popup

Recently I have been assigned a job to write a api which will give a code to the client for them to embed in their website with one button and one link to a javascript external file. When client will click on the button a popup window will open with an external page with only clients data showing in the popup.

I found a script on the net to include external files into the existing page.

my html will be just to include these two lines of code.

<a id="element" data-toggle="modal" href="#myModal" class="btn btn-warning">Open Modal</a>
<script src="external.js"></script>

in external javascript file I am inserting the jquery and bootstrap files

function myFunction() {
  loadjscssfile("https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js", "js") //dynamically load and add this .js file
  loadjscssfile("http://code.jquery.com/ui/1.9.2/jquery-ui.js", "js") ////dynamically load and add this .css file

  loadjscssfile("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js", "js") //dynamically load and add this .js file
  loadjscssfile("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", "css") ////dynamically load and add this .css file
  loadjscssfile("myscript.js", "js")
}

function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
    var fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

my other javascript file to include the modal div code is

var el = document.getElementById('element');
var body = document.getElementsByTagName('body');
    document.getElementById('element').onclick = function (e) {
    e.preventDefault();
    document.body.innerHTML +='<div class="modal fade" id="myModal"            role="dialog">';
document.body.innerHTML +='<div class="modal-dialog">';

  <!-- Modal content-->
  document.body.innerHTML +='<div class="modal-content">';
 document.body.innerHTML += '<div class="modal-header">';
  document.body.innerHTML += '<button type="button" class="close" data-dismiss="modal">&times;</button>';
  document.body.innerHTML += '<h4 class="modal-title">Modal Header</h4>';
  document.body.innerHTML += '</div>';
  document.body.innerHTML += '<div class="modal-body">';
  document.body.innerHTML += '<iframe src="http://www.w3schools.com" style="width:100%;height:100%;"></iframe>';
  document.body.innerHTML +=  '</div>';
  document.body.innerHTML +=  '<div class="modal-footer">';
  document.body.innerHTML +=  '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
  document.body.innerHTML +=  '</div>';
 document.body.innerHTML += '</div>';

document.body.innerHTML +='</div>';

We just want to send a few line of code to the client to include in their website and rest should be done through external files. Now the button is opening the div but not in modal and close button is also not responding. Hope this will explain what I want to achieve.

Upvotes: 0

Views: 2137

Answers (1)

Ramin
Ramin

Reputation: 207

The following code is a sample code that opens a new popup window and adds an external script file (jquery) to its head.

var popupWin = window.open('your url', '_blank', 'scrollbars=1, location=no');
popupWin.document.open();
var jqueryScript = '<script src="https://code.jquery.com/jquery-1.12.3.js"></script>';
$(popupWin.document).find('head').append(jqueryScript);
popupWin.document.close();

Upvotes: 1

Related Questions