Question

我想制作一个屏幕效果，就像按下按钮一样，对话框会出现在中心，剩下的空间会变得更暗，不透明。

当你点击它的butoon时，一个例子就像Boostrap的模态。

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

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

我想知道，他们使用这种特定屏幕效果的方式或功能????我将感谢我将有一个脚本示例。非常感谢你。

Answer 1

基本上，这是通过在所有当前屏幕元素上叠加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>

.Js晚餐怎么样？黑屏和增强元素，屏幕效果

1 个答案: