2

私は、ユーザーが特定の年齢であるかどうかをポップアップして尋ねるblockUIを使用した非常に単純なモーダルに取り組んできました。競合を避けるために、私は常に最初に独自のページでコードを開発しようとします。それが私がここで行ったことです。単純なhtml/javascriptページが1つありますが、正常に機能していません。

ページが読み込まれるたびに、問題なく表示されます。ただし、（ボタンを使用しなくても）ブロックを解除しようとすると、何も実行されません。読み込み中のアイコンが表示されているだけです。

<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>&nbsp;&nbsp;&nbsp;<button id="under">Under 21</button>


</div>
It's dusty under here! Let me be seen!
</body>
</html>

Chromeのコンソールにエラーは表示されません。これを閉じてはいけない理由を、私は本当に見つけることができません。

4

1 に答える 1

5

呼び出すときは$.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>&nbsp;&nbsp;&nbsp;
        <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をご覧ください。

于 2013-03-26T20:39:50.890 に答える