模态('show')没有按预期工作

时间:2013-06-26 05:26:13

标签: javascript jquery twitter-bootstrap modal-dialog

我创建了一个函数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);
}

当我点击按钮时,此代码未显示模态。任何人都可以帮助为什么它没有显示模态对话,当我用show参数调用模态函数时?它显示你好!!在控制台中并正确添加这些元素,但下面没有按预期工作的唯一行。

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

1 个答案:

答案 0 :(得分:0)

我不确定最初的问题是什么,但我注意到的是设置动态rel的{​​{1}}属性是使用“样式表”,而它应该是“样式表”。这两个,并使用<link>加载东西的方法,我得到它的工作:

onload

DEMO: http://jsfiddle.net/hz3Bw/1/

当然,这使用CDN文件,因此URL已被更改,因此它可以在jsFiddle中使用。