1

In my project i am displaying a custom pop up page like below by javascript which has a form for user to fill,then I need to load some js files when pop up is loaded. how to load js files,plz help.

<html>
     <head>
           <script type='text/javascript' src='files/jsfiles/core.js'></script>
     </head>
     <body>
           <!- I need to call javascript function showUsers() from here->
          <input type='button' onclick='showUsers();' value='listUsers'>
     </body>
</html>
2
  • 1
    your popup will be a simple alert like alert('Popup message') or a custom popup ? Dec 22, 2014 at 6:59
  • No that is a custom popup which display a form for user to fill and submit.
    – jones
    Dec 22, 2014 at 7:07

3 Answers 3

3
function loadScript(src) {
    var script = document.createElement("script");
    script.async = false;
    script.src = src;
    document.head.appendChild(script);
};

function loadStyle(src) {
    var style = document.createElement("link");
    style.rel = "stylesheet";
    style.href = src;
    document.head.appendChild(style);
};

function loadFiles() {
    var scriptsArray = ['src1url', 'src2url'.., 'scrnurl'];
    var csssArray = ['src1url', 'src2url'.., 'scrnurl'];
    for (var i = 0; i < scriptsArray.length; i++) {
        loadScript(scriptsArray[i]);
    }
    for (var i = 0; i < csssArray.length; i++) {
        loadStyle(csssArray[i]);
    }
};

function yoursubmitFcn(callback) {
    // your functionality here;
    callback();
}
$(document).ready(function () {
    // do your stuff
    yoursubmitFcn(loadFiles);
});

Also check: Another short form

2
  • But i can't call any javascript function which is located inside my popup.
    – jones
    Dec 23, 2014 at 3:57
  • You can if you are not opening your popup in iFrame Dec 23, 2014 at 4:43
0

You can use this library fancybox

Loading jQuery from CDN

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" 
media="screen" />

html

<a href="pop up page" onclick='openmsg_sent();' class="iframe open_pop">Sign in</a> 

JS

    $('.open_pop').fancybox({
    });

    function openmsg_sent() {
    jQuery(".open_pop").trigger("click");
    }
0

For better and consistent UI, you can use a div which you can display with fixed positioning on click of the button.
I believe Alert wont be able to display css properties if am not wrong.

What you can do is, onclick of the button, in the JS, you can put your popup content into a div which is hidden initially and shown on click.

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.