twitter-bootstrap 如何在引导模式上修改 jquery-ui 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16621707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to modify the jquery-ui dialog on bootstrap modal
提问by CrasHandBurN
I have this following code for making a confirm dialog using 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§ion=" + 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">
How to change it to use Bootstrap Modals?
如何更改它以使用 Bootstrap Modals？
回答by Zim
You could use the standard Bootstrap modal markup..
您可以使用标准的 Bootstrap 模态标记..
<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>
and then use modal 'show' event to dynamically set a different iframe src..
然后使用模态'show'事件动态设置不同的iframe src..
$('#helpBtn').click(function(){
$('#myModal').on('show', function () {
var frameSrc = "?help§ion=templates"; // value can be passed from button
$('iframe').attr("src",frameSrc);
});
$('#myModal').modal({show:true})
});
回答by ford prefect
Just to add on to @Kris Zhang's answer: The Bootstrap Jquery Pluginis really the answer to this. The function calls are the same as those of jquery dialog boxes but it automatically adds the divs around the dialog box in order to display the modal bootstrap style. Just add or steal the bootstrap library from the link above and you don't need to use iframes.
补充一下@Kris Zhang 的回答：Bootstrap Jquery 插件确实是解决这个问题的答案。函数调用与jquery对话框相同，但它会自动在对话框周围添加div，以显示模态引导程序样式。只需从上面的链接中添加或窃取引导库，您就不需要使用 iframe。
回答by Kris Zhang
You can have a look at Bootstrap jQuery Plugin
你可以看看 Bootstrap jQuery Plugin
It's based on bootstrap 3.x
它基于引导程序 3.x
