我无法让 BlockUI 在模式对话框上工作。
我尝试解决 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 (文档 http://jquery.malsup.com/block/#options):
// z-index for the blocking overlay
baseZ: 1000,
jQuery UI 对话框作为用于指定 z 索引的选项 http://jqueryui.com/demos/dialog/#option-zIndex以及。它的默认值为 1000。因此您必须为 BlockUI 选项设置一个更高的数字,假设为 2000:
$.blockUI({
theme: true,
baseZ: 2000
})
DEMO https://jsfiddle.net/didierg/cKCFN/426/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)