1

ボタンを押すとダイアログが中央に表示され、残りのスペースが不透明で暗くなるような画面効果を作りたいです。

ボタンをクリックすると、Boostrap の Modal のような例が表示されます。

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

私の理解では、単純に .dialog() などを使用できる要素を表示することです。画面効果は、.dialog() などの内部で使用される別の関数でなければなりません。

この特定の画面効果に彼らがどのように、またはどの機能を使用しているか知りたいですか???? スクリプトの例があることに感謝します。どうもありがとうございました。

4

1 に答える 1

2

基本的に、これは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 に答える