本文介绍了阻止jQueryUI模态对话框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不能让BlockUI在模式对话框中工作。
我试图照顾z-index问题,但没有成功...
I can't make BlockUI work over a modal dialog.
I tried to look after z-index issues, but without success...
在我的网页中,这里是头:
In my web page, here is the head :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script>
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script>
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" />
和正文:
<div id="dialog_test" title="Test">
TEST
</div>
<a href="#" id="go">GO</a>
<script>
$(function() {
$( "#dialog_test" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Ajax": function() {
$.ajax({
"url" : "http://jquery.malsup.com/block/wait.php",
"success" : function(json) {
$( "#dialog_test" ).dialog( "close" );
}
});
}
}
});
$( "#go" ).click(function(event) {
event.preventDefault();
$( "#dialog_test" ).dialog( "open" );
});
});
$(document)
.ajaxStart(function() {
$.blockUI({
theme: true
})
})
.ajaxStop($.unblockUI);
</script>
任何想法?
推荐答案
您没有指定使用z-index尝试的内容。
You don't specify what you have tried with z-index.
blockUI插件可以选择更改z-index的z-index消息():
The blockUI plugin has an option to change the z-index of the message it creates (documentation):
// z-index for the blocking overlay
baseZ: 1000,
jQuery UI对话框作为的选项。它的默认值为1000.所以你必须为BlockUI选项设置一个更高的数字,就是说2000:
jQuery UI Dialog as an option for specifying a z-index as well. Its default value is 1000. So you have to set a higher number for the BlockUI option, let's say 2000:
$.blockUI({
theme: true,
baseZ: 2000
})
DEMO
这篇关于阻止jQueryUI模态对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!