Eri*_*ric 2 html javascript css jquery blockui
我一直在使用 blockUI 开发一个非常简单的模式，它会弹出并询问用户是否达到特定年龄。我总是尝试先在它自己的页面中开发一段代码以避免冲突，这就是我在这里所做的。我有一个简单的 html/javascript 页面，但它没有正常运行。
每当页面加载时，它就会出现得很好。但是，当尝试解除阻止时（即使不使用按钮），它也不会执行任何操作。它只是坐在那里，带有加载图标。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// A bit of a work-around. BlockUI tries to center based on location of
// the div. By attaching block to the html tag immediately, we avoid
// this issue completely.
$('html').block({
message: $('#message'),
centerX: true,
centerY: true,
css: {
width: '600px',
height: '300px',
border: '3px solid #FF9900',
backgroundColor: '#000',
color: '#fff',
padding: '25px'
}
});
$('#over').click(function() {
alert('clicked!');
$.unblockUI();
return false;
});
$('#under').click(function() {
$.unblockUI();
return false;
});
});
</script>
</head>
<body>
<div id="message" style="display:none;">
<img src="logo.png" border="0" />
<br />
<h1>Welcome!</h1>
You may not view this page unless you are 21 or over.<br />
<button id="over">I am 21 or over</button> <button id="under">Under 21</button>
</div>
It's dusty under here! Let me be seen!
</body>
</html>
Chrome 的控制台中没有显示任何错误，我真的找不到它不应该关闭的原因。
当您调用时，请$.unblockUI()尝试在元素上调用它，例如。$('html').unblock();：
<div class="body">
<div id="message" style="display:none;">
<img src="logo.png" border="0" />
<br />
<h1>Welcome!</h1>
You may not view this page unless you are 21 or over.
<br />
<button id="over">I am 21 or over</button>
<button id="under">Under 21</button>
</div>
It's dusty under here! Let me be seen!
</div>
JS 将是：
$('.body').block({
message: $('#message'),
centerX: true,
centerY: true,
css: {
width: '600px',
height: '300px',
border: '3px solid #FF9900',
backgroundColor: '#000',
color: '#fff',
padding: '25px'
}
});
$('#over').click(function () {
alert('clicked!');
$('.body').unblock();
return false;
});
$('#under').click(function () {
$('.body').unblock();
return false;
});
请参阅工作示例：http : //jsfiddle.net/amyamy86/Taw83/
在此处阅读有关元素阻止的更多信息：http : //www.malsup.com/jquery/block/#element