1

我想制作一个屏幕效果，就像当你按下一个按钮时，一个对话框会出现在中心，而其余的空间会随着不透明度而变暗。

当您单击其按钮时，一个示例将类似于 Boostrap 的模态。

http://twitter.github.com/bootstrap/javascript.html

我的理解是显示一个我们可以简单地使用 .dialog() 等的元素，屏幕效果应该是 .dialog() 等内部使用的另一个函数。

我想知道，他们如何或使用什么功能来实现这种特定的屏幕效果？？？？我会很感激我会有一个脚本示例。非常感谢你。

4

1 回答 1

2

基本上，这是通过将 a 覆盖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>
于 2012-12-27T01:48:07.913 回答