3

了jQuery UI的对话框我有做使用jQuery UI一个确认对话框这下面的代码:如何修改自举模式

function Help(section) { 

$("#userpopup").remove(); 
$("body").append("<div id='userpopup' title='Help' style='display:none'></div>"); 

$('#userpopup').dialog({ 
    autoOpen: true, 
    width: 560, 
    height: 500, 
    buttons: { 
     "OK": function() { 
      $(this).dialog("close"); 
      $("#userpopup").remove(); 
     } 
    }, 
    open: function (event, ui) { 
     $("#userpopup").html("<iframe width='100%' height='400' src='?help&section=" + section + "' frameborder='0' marginwidth='0' marginheight='0' allowtransparency='true'></iframe>"); 
    }, 
    beforeClose: function (event, ui) { 
     $("#userpopup").html(""); 
    } 
}); 


return false; 

}

<input onClick="javascript:Help('templates')" type="button" class="btn" value="help"> 

如何改变它使用引导情态动词?

回答

4

你可以使用标准的引导模式标记..

<input id="btnHelp" type="button" class="btn" value="help"> 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
      <h3>Dialog</h3> 
    </div> 
    <div class="modal-body"> 
      <iframe src="" width="100%" height="400" frameborder="0"></iframe> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal">OK</button> 
    </div> 
</div> 

然后用模态 '秀' 事件动态设定不同的IFRAME SRC ..

$('#helpBtn').click(function(){ 

    $('#myModal').on('show', function() { 
     var frameSrc = "?help&section=templates"; // value can be passed from button 
     $('iframe').attr("src",frameSrc); 

    }); 
    $('#myModal').modal({show:true}) 
}); 

Demo of iFrame inside modal

1

你可以看看Bootstrap jQuery Plugin

它的基础在引导3.x

+6

请注意,[只有链接的答案](http://meta.stackoverflow.com/tags/link-only-answers/info)不鼓励,所以答案应该是搜索解决方案的终点(与另一个引用的中途停留时间相比,这些引用往往会随着时间推移而变得过时)。请考虑在此添加独立的摘要,并将链接保留为参考。 – kleopatra

5

只是添加到@Kris张的回答:Bootstrap Jquery Plugin真的是这个答案。函数调用与jquery对话框的功能调用相同,但它会自动在对话框中添加div以显示模式引导样式。只需从上面的链接添加或窃取引导程序库,并且不需要使用iframe。