Question

在我的项目中，我正在通过javascript显示如下所示的自定义弹出页面，其中有一个供用户填写的表单，然后我需要在加载弹出窗口时加载一些js文件。如何加载js文件，plz帮助。

<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>

Answer 1

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);
});

同时检查：Another short form

Answer 2

您可以使用此库fancybox

从CDN加载jQuery

<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");
    }

Answer 3

为了获得更好和一致的用户界面，你可以使用一个div，你可以点击按钮固定定位我相信如果没有错误，Alert将无法显示css属性。

你可以做的是，点击按钮，在JS中，你可以将你的弹出内容放入一个最初隐藏并在点击时显示的div。

希望这有帮助。

如何在自定义弹出窗口加载中加载js / css文件

3 个答案: