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

How to load js/css files in custom popup load

本文关键字：加载 js css 文件 窗口 自定义      更新时间：2023-09-26

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

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

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

另请检查：另一个简短形式

你可以使用这个库花哨的盒子

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

为了获得更好和一致的 UI，您可以使用一个div，您可以在单击按钮时以固定位置显示该div。
我相信如果我没有错，警报将无法显示 css 属性。

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

希望这有帮助。

相关文章：