[英]jQuery UI Dialog not showing correctly
I'm using jQuery UI 1.8.19 and Twitter Bootstrap 2.0.3 in a site I'm developing. 我在我正在开发的网站中使用jQuery UI 1.8.19和Twitter Bootstrap 2.0.3。 I want to show a modal dialog when click in a Delete and for this I do that: 我想在点击删除时显示一个模态对话框,为此我这样做:
<div id="dialog-confirm" title="<?php echo lang("event:delete_confirm_title") ?>">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo lang('event:delete_confirm_content') ?></p>
</div>
And the JS to fire the event is this one: 发起事件的JS是这样的:
$(function() {
$("#delete").click(function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"<?php echo lang('event:delete') ?>": function() {
$( this ).dialog( "close" );
},
"<?php echo lang('global:cancel_label') ?>": function() {
$( this ).dialog( "close" );
}
}
});
});
});
For some reason the modal dialog is always showed at the end of the page when it shouldn't be I think and when I click the element the dialog appears but the page is redirected instantaneously to my home page and didn't know the cause because I don't have redirects in any place and also there are no forms there. 出于某种原因,模式对话框始终显示在页面的末尾,当我不应该这样时,当我单击该元素时,对话框会出现,但页面会立即重定向到我的主页,并且不知道原因,因为我没有在任何地方重定向,也没有形式。 Any advice or help on this? 对此有何建议或帮助? Best regards 最好的祝福
You should add style='display: none'
to your dialog div so it won't be displayed at startup. 您应该将style='display: none'
到对话框div中,以便在启动时不显示它。
Then if the page is sent to home when you click the button, you may want to check what type of button #delete is and finish it's function with return false
if it's a Submit for example to avoid normal click event handler to be launched : 然后,如果在单击按钮时将页面发送到主页,您可能需要检查#delete按钮的类型并完成它的功能,如果它是提交,则return false
,以避免启动正常的单击事件处理程序:
$(function() {
$("#delete").click(function(e){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"<?php echo lang('event:delete') ?>": function() {
$( this ).dialog( "close" );
},
"<?php echo lang('global:cancel_label') ?>": function() {
$( this ).dialog( "close" );
}
}
});
e.preventDefault();
});
});
Edit : Modification done according to Scott suggestion 编辑:根据斯科特的建议完成修改
This happened to me as well. 这也发生在我身上。 There is only one cause I know of. 我所知道的只有一个原因。 The dialog CSS file is not being loaded. 没有加载对话框CSS文件。
See my SO Question: position:fixed breaks in IE9 看我的SO问题: 位置:在IE9中修复了中断
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.