Конвертировать загрузочный лоток для Twitter без ограничений Модальный в закрытый

Я использую Twitter Bootstrap для создания модального, который нельзя закрыть. Это специально. Однако через десять секунд я хочу, чтобы пользователь мог закрыть модальный режим, нажав клавишу эвакуации или нажав на нее. Это можно сделать? Вот пример кода:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="#" onclick="location.href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css'; return false;" 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>

Ответ 1

К сожалению, самый чистый способ сделать это включает в себя вызов некоторых методов объекта модальный, которые не обязательно являются частью общедоступного API, даже несмотря на то, что методы являются технически общедоступными в их области. Это означает, что если вы введете этот код в производство, вам придется быть осторожным, чтобы проверять изменения в реализации bootstrap-modal.js при каждом обновлении. Вот как это сделать:

JS

$('#myModal').on('shown', function() {
  // hold a ref to the modal object
  var mdl = $(this).data('modal')

  setTimeout(function() {
    console.log('The modal has been open for 10 seconds.');

    // enable keyboard escaping
    mdl.options.keyboard = true
    mdl.escape()

    // but re-disable it for future show events ;)
    mdl.options.keyboard = false

    // replace refocus handler with hide() invocation
    mdl.$backdrop.off('click')
    mdl.$backdrop.click($.proxy(mdl.hide, mdl))

  }, 10000); // ten seconds
});

Plunk

Соответствующий код находится в script.js в живом примере и по умолчанию составляет 3 секунды.

Ответ 2

Вот мое решение: http://jsfiddle.net/g5bDC/1/

Просто добавьте отключенную кнопку (здесь в нижнем колонтитуле) и включите ее после X secs

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);
});

ИЗМЕНИТЬ: Согласно 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);
});