modal('show'）未按预期工作

modal('show') is not working as expected

本文关键字：工作 show modal      更新时间：2023-09-26

我制作了一个函数appendScript，它将在按钮点击事件中调用，我的函数代码是

function appendScript() {
    var v_js;
    var head = document.getElementsByTagName('head')[0];
    v_js = document.createElement('script');
    v_js.type = 'text/javascript';
    v_js.src = "/resource/1372205606000/jquery_min_js";
    head.appendChild(v_js);
    interval = self.setInterval(function () { 
        if (jQuery) {
            window.clearInterval(interval);
            var body = document.getElementsByTagName('body')[0];
            v_js = document.createElement('script');
            v_js.type = "text/javascript";
            v_js.src = "/resource/1372176744000/bootstrap_min_js";
        }  
        body.appendChild(v_js);
        var v_css = document.createElement('link'); 
        v_css.rel = "stylesheets";
        v_css.type = "text/css";
        v_css.href = "/resource/1372206945000/bootstrap_min_css";
        body.appendChild(v_css);  
    }, 300);
    var interval1  = self.setInterval(  function () {  
        if (typeof (jQuery.fn.modal) !== 'undefined')    {
            console.log('Hello!!'); 
            window.clearInterval(interval1);
            jQuery(document.getElementsByTagName('body')[0]).append('<div id="myModal"  class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"   aria-hidden="true"><div class="modal-header"><button type="button" class="close"  data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p>One fine body…</p></div><div  class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button><button class="btn btn-primary">Save changes</button></div></div>');
            jQuery('#myModal').modal('show');
        }
    }, 300);
}

当我点击按钮时，这段代码没有显示modal。当我用show参数调用模态函数时，有人能帮我为什么不显示模态对话吗？正在播放你好！！在控制台中，并正确添加这些元素，但下面是唯一一行没有按预期工作的行。

jQuery('#myModal').modal('show');

我不确定最初的问题是什么，但我注意到设置动态<link>的rel属性时使用了"stylesheets"，而它应该是"stylesheet"。这两者，以及使用onload加载东西的方法，我让它工作起来：

function appendScript() {
    var head = document.head || document.getElementsByTagName('head')[0],
        $script;
    if (typeof jQuery === "undefined") {
        $script = document.createElement('script');
        $script.type = 'text/javascript';
        $script.onload = jQueryLoaded;
        $script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js";
        head.appendChild($script);
    } else {
        jQueryLoaded();
    }
}
function jQueryLoaded() {
    var head = document.head || document.getElementsByTagName('head')[0],
        linkTB = document.createElement('link'),
        scriptTB = document.createElement('script');
    if (typeof jQuery.fn.modal === "undefined") {
        linkTB.rel = "stylesheet";
        linkTB.type = "text/css";
        linkTB.href = "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css";
        head.appendChild(linkTB); 
        scriptTB.type = "text/javascript";
        scriptTB.onload = twitterBSLoaded;
        scriptTB.src = "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js";
        head.appendChild(scriptTB);
    } else {
        twitterBSLoaded();
    }
}
function twitterBSLoaded() {
    jQuery(document.body).append('<div id="myModal"  class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"   aria-hidden="true"><div class="modal-header"><button type="button" class="close"  data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p>One fine body…</p></div><div  class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button><button class="btn btn-primary">Save changes</button></div></div>');
    jQuery('#myModal').modal('show');
}

演示：http://jsfiddle.net/hz3Bw/1/

当然，这使用了CDN文件，所以URL已经更改，所以它可以在jsFiddle中工作。

相关文章：