7

Twitter Bootstrap を使用して、閉じることができないモーダルを作成しています。これはわざとです。ただし、10 秒後に、ユーザーがエスケープ キーを押すか、モーダルの外側をクリックしてモーダルを閉じることができるようにしたいと考えています。これはできますか？サンプルコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body>
        <!-- Button to trigger modal -->
        <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

        <!-- Modal -->
        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-header">
                <h3 id="myModalLabel">A Modal That Can't Be Closed</h3>
            </div>
            <div class="modal-body">
                <p>There is no way to close this modal. I would like to make it so that after ten seconds, pressing the escape key or clicking outside the modal causes the modal to close.</p>
            </div>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
        <script>
            $('#myModal').on('shown', function() {
                setTimeout(function() {
                    alert('The modal has been open for 10 seconds.');
                }, 10000);
            });
        </script>
    </body>
</html>
4

2 に答える 2

1

これが私の解決策です: http://jsfiddle.net/g5bDC/1/

無効化されたボタン (ここではフッター) を追加し、X 秒後に有効化するだけです

HTML :

<div class="modal-footer"> 
    <a href="#" class="btn" disabled=disabled id="closeBtn" aria-hidden="true">Close</a>
</div>

JS:

$('#myModal').on('shown', function () {
    setTimeout(function () {
        $('#closeBtn').removeAttr('disabled').attr('data-dismiss', 'modal');
    }, 5000);
});

EDIT：MartinHNによると、更新されたバージョンは次のとおりです：http://jsfiddle.net/g5bDC/2/

JS は次のようになりました。

$('#myModal').on('show', function() {
    $('#closeBtn').attr('disabled', 'disabled');
});

$('#myModal').on('shown', function() {
    setTimeout(function() {
        $('#closeBtn').removeAttr('disabled').attr('data-dismiss', 'modal');
    }, 2000);
});
于 2013-04-16T08:53:58.017 に答える