Javascript 如何重新使用具有多个链接的引导模式对话框
我试图在找到的这个JSFIDLE中重新使用引导模式。我遇到的问题是,我必须先刷新页面,然后才能使用其他链接。否则,当选择另一个链接时,将显示所选第一个链接的url。谁能看出我错在哪里 下面是我所拥有的 (这是我的第一篇文章,如果我没有正确地完成这项工作,我深表歉意)Javascript 如何重新使用具有多个链接的引导模式对话框,javascript,jquery,twitter-bootstrap,modal-dialog,Javascript,Jquery,Twitter Bootstrap,Modal Dialog,我试图在找到的这个JSFIDLE中重新使用引导模式。我遇到的问题是,我必须先刷新页面,然后才能使用其他链接。否则,当选择另一个链接时,将显示所选第一个链接的url。谁能看出我错在哪里 下面是我所拥有的 (这是我的第一篇文章,如果我没有正确地完成这项工作,我深表歉意) $('a[data toggle=“modal”]”)。在('click',function()上{ //使用调用模式的按钮的内容更新模式标题 $('#myModalLabel').html($(this.html()); //修复
$('a[data toggle=“modal”]”)。在('click',function()上{
//使用调用模式的按钮的内容更新模式标题
$('#myModalLabel').html($(this.html());
//修复了一个引导错误,该错误阻止了模式被重用
$('#实用工具_body')。加载(
$(this.attr('href'),
功能(响应、状态、xhr){
如果(状态=='错误'){
//log('got here');
$('utility_body').html('Oh boy抱歉,出现错误:'+xhr.status+''+xhr.statusText+');
}
归还这个;
}
);
});
&时代;
管理流程的权利
一个很好的主体…这将被来自传入href的内容所取代
接近
保存更改
<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">×</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>