我想做一个屏幕效果，就像当你按下一个按钮时，一个对话框会出现在中间，其余的空间会变得更暗，不透明。
当你点击它的按钮时，一个例子就像 Boostrap 的 Modal。
http://twitter.github.com/bootstrap/javascript.html
我的理解是显示一个元素我们可以简单地使用.dialog()等，屏幕效果应该是.dialog()等内部使用的另一个函数。
我想知道，他们是如何或使用什么功能来实现这种特定的屏幕效果的？？？？如果我有一个脚本示例，我将不胜感激。非常感谢。
最佳答案
基本上，这是通过在所有当前屏幕元素之上覆盖一个 div 并将其背景设置为黑色并将其不透明度设置为 50%-75% 来完成的。然后最重要的是，将另一个包含您的“模式”内容的 div 居中。
我建议使用像 KendoUI、ExtJS、JQueryUI 等库，但它们都会做类似于以下快速而肮脏的演示的事情:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$('#button').click(function () {
var blackOverlay = $('<div/>')
.attr('id', 'overlay')
.css({
'position': 'absolute',
'width': '100%',
'height': '100%',
'background-color': 'black',
'top': 0,
'left': 0,
'z-index': 1001,
'opacity': .75
});
var modalContent = $('<div/>')
.css({
'z-index': 1002,
'background-color': 'white',
'display': 'inline-block',
'width': 300,
'height': 150,
'margin-left': 400,
'margin-top': 400
})
.html('This is the modal content.<br/>');
var okayButton = $('<input/>')
.attr('type', 'button')
.attr('value', 'OK')
.click(function () {
blackOverlay.remove();
});
modalContent.append(okayButton);
blackOverlay.append(modalContent);
$('body').append(blackOverlay);
});
});
</script>
</head>
<body>
Here is some content.<br />
Here is some content.<br />
Here is some content.<br />
Here is some content.<br />
Here is some content.<br />
Here is some content.<br />
Here is some content.<br />
Here is some content.<br />
Here is some content.<br />
Here is some content.<br />
<input id="button" type="button" value="Click Me" />
</body>
</html>
关于javascript - .Js晚餐如何|黑屏和增强元素，屏幕效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14048439/