![](/img/trans.png)
[英]how do I add an extra Dialog Widget close button to a jquery ui Dialog window
[英]How do I bind a close button with an open button using jQuery UI Dialog?
我正在尝试使用5个jQuery对话框模态创建类似于向导的体验。 我想从第一个启动新的模式,然后打开第二个,但关闭第一个。 第三,第四和第五相同。
我可以很好地打开嵌套在其他模态中的模态,但是当下一个模态打开时,上一个模态不会关闭。 最后,我在彼此之上打开了5个窗口。
这是我用来打开5个模态中的两个模态的代码(其余的将使用相同的逻辑依次执行:
<script>
$(function() {
$( "#modal_1" ).dialog({position:['middle',60],
open: function(event, ui) {
dialogClass: 'ui-widget-shadow',
modal: true,
autoOpen: false,
width: '950px',
close: function(ev, ui) {$(this).close();}
});
$( ".modal_1open" ).click(function() {
$( "#modal_1" ).dialog( "open" );
return false;
});
$( ".btnNext" ).click(function(){
$('.ui-dialog-content').dialog( "close" );
})
});
</script>
<script>
$(function() {
$( "#modal_2" ).dialog({position:['middle',60],
open: function(event, ui) {
dialogClass: 'ui-widget-shadow',
modal: true,
autoOpen: false,
width: '950px',
close: function(ev, ui) {$(this).close();}
});
$( ".modal_2open" ).click(function() {
$( "#modal_2" ).dialog( "open" );
return false;
});
$( ".btnNext" ).click(function(){
$('.ui-dialog-content').dialog( "close" );
})
});
</script>
这是html的示例:
<a class="button btnNext">Continue</a> <!--this is the button inside the modal that is supposed to fire the next modal-->
<div style="display:none" id="modal_1" title="Login">
<!--#include file="modal_1.asp"-->
</div>
<div style="display:none;" id="modal_2" title="Page Two Title">
<!--#include file="modal_2.asp"-->
</div>
我想我可以将close函数与下一个函数的开头绑定在一起,但是我不知道该怎么做。 有帮助吗?
我节食了您的代码以寻找线索并进行了一些测试。 IMO,您有未分配的选项。 close:用于事件处理程序,不是按钮。 使用按钮字段定义按钮。 当单击关闭对话框并打开下一个对话框时...
$(this).dialog("close");
$("#modal_2").dialog("open");
我的简单版本如下:
$(function() {
$("#modal_1").dialog({
modal: true,
autoOpen: true,
buttons: [{text: "Next",click: function() {
$(this).dialog("close");
$("#modal_2").dialog("open");
}
}]
});
$("#modal_2").dialog({
modal: true,
autoOpen: false,
buttons: [{text: "Next",click: function() {
$(this).dialog("close");
$("#modal_1").dialog("open");
}}]
});
});
我在这里测试过: http : //jsfiddle.net/JmgKS/8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.