0

我做了一个函数 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…&lt;/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);
}

当我单击按钮时，此代码未显示模式。当我使用显示参数调用模态函数时，谁能帮助它为什么不显示模态对话框？它显示你好！在控制台中并正确添加这些元素，但唯一没有按预期工作的行如下。

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

1 回答 1

0

我不确定最初的问题是什么，但我注意到设置rel动态属性<link>是使用“样式表”，而它应该是“样式表”。两者，并使用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…&lt;/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 中使用。

于 2013-06-26T06:00:53.790 回答