Как я могу повторно использовать один модульный div Bootstrap?

Я бы хотел иметь несколько разных ссылок на повторном использовании одного модального div с помощью модального плагина Bootstrap:

<h3>This button shows a modal (<code>#utility</code>) with text "Phasellus <em>tincidunt gravida</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="#" onclick="location.href='http://fiddle.jshell.net/jhfrench/6K8rD/show/'; return false;" data-target="#utility" class="btn">Modal 1</a><br />
<h3>This button should invoke the same modal (<code>#utility</code>), but fill it with text "Phasellus <em>egestas est eu</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="#" onclick="location.href='http://fiddle.jshell.net/jhfrench/AWSnt/show/'; return false;" data-target="#utility" class="btn">Modal 2</a><br />

<!-- Modal -->
<div id="utility" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="myModalLabel">Click outside modal to close it</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…this is getting replaced with content that comes from passed-in href</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Я ожидаю, что щелчок по любой ссылке (которая называется стилем как кнопка) вызовет модальный и загрузит модальную страницу (значение href), соответствующую нажатой кнопке. Вместо этого модальная всегда загружается с содержимым ссылки, которую вы нажимаете первым; модаль не "обновляет" содержимое, которое должно быть продиктовано href "другой" ссылкой.

Я думаю, что это ошибка Bootstrap, но я задаю этот вопрос здесь, если я неправильно его использую.

Для демонстрации см. http://jsfiddle.net/jhfrench/qv5u5/.

Ответы

Ответ 1

После дальнейших исследований я обнаружил несколько проблем Bootstrap, которые упоминают это поведение здесь и . Я попросил вопрос 5514 повторно открыть.

Между тем, этот jQuery будет исправлять проблему *:

$('a[data-toggle="modal"]').on('click', function(){
    // update modal header with contents of button that invoked the modal
    $('#myModalLabel').html( $(this).html() );
    //fixes a bootstrap bug that prevents a modal from being reused
    $('#utility_body').load(
        $(this).attr('href'),
        function(response, status, xhr) {
            if (status === 'error') {
                //console.log('got here');
                $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
            }
            return this;
        }
    );
});​

Обратитесь к http://jsfiddle.net/jhfrench/qv5u5/51/ для рабочего примера. *

* - По какой-то причине иногда, когда вы нажимаете кнопку в скрипте, модальный будет показывать пустой. Это не проблема в приложении, с которым я работаю, поэтому я подозреваю, что это проблема, не связанная с этим вопросом/ответом.

Ответ 2

Вместо того, чтобы писать html-разметки модальных и манипулировать им с помощью javascript, я бы использовал Bootstrap-Dialog для облегчения всего:

$('.modal-btn').click(function(event){
    var $link = $(this);
    new BootstrapDialog({
        title   :   'Load content of : ' + $link.attr('href'),
        content :   $('<div>Loading...</div>').load($link.attr('href')),
        buttons :   [{
            label   :   'Close',
            onclick :   function(dialog){
                dialog.close();
            }
        }, {
            label   :   'Save changes',
            cssClass:   'btn-primary',
            onclick :   function(dialog){
                alert('The content of the dialog is: ' + dialog.getBody().html());
                dialog.close();
            }
        }]
    }).open();

    event.preventDefault();
});

Посмотрите здесь, чтобы скачать демо, он загружает два URL-адреса, которые вы указали в своем примере: http://jsfiddle.net/txrM8/

Подробнее о Bootstrap-Dialog: http://nakupanda.github.io/bootstrap-dialog/