Question

我正在尝试重新使用这个jsFiddle找到http://jsfiddle.net/jhfrench/qv5u5/51/的bootstrap模态。我遇到的问题是我必须刷新页面才能使用其他链接。否则，当选择另一个链接时，将显示所选第一个链接的URL。谁能看到我错在哪里？

以下是我所拥有的。

（如果我没有正确地做到这一点，我很抱歉，因为这是我的第一篇文章）

<script>    $('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;
        }
    );
});
</script>
<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">&times;</button>
<h1 id="myModalLabel">The Right to Manage Process</h1>
  </div>
  <div class="modal-body" id="utility_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">Close</button>
<button class="btn btn-primary">Save changes</button>
  </div>
</div>
<ul>
<li><a data-target="#utility" href="retirement-modal-content/rtm-process.html" role="button" data-toggle="modal">The Right to Manage Process</a></li>
  <li><a data-target="#utility" href="retirement-modal-content/mgmt-sel-prcs.html" role="button" data-toggle="modal">The Management Selection Process</a></li>
</ul>

如何重用多个链接的bootstrap模态对话框

0 个答案: