我无法通过模态对话框使BlockUI工作。
我试图照顾z-index问题，但没有成功…
我试图照顾z-index问题，但没有成功…
在我的网页中，
<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。
blockUI插件可以更改其创建的消息的z-index(documentation)：
// z-index for the blocking overlay baseZ: 1000,
jQuery UI对话框也是一个option for specifying a z-index。它的默认值为1000.所以你必须为BlockUI选项设置一个较高的数字，就是说2000：
$.blockUI({
theme: true,baseZ: 2000
})