使用Bootstrap v3.3.5
我有一个使用url domain.com/companies的网页
这是我在该网页中模式的触发器.
<a href="#modal-add-company" class="btn btn-effect-ripple btn-effect-ripple btn-success" data-toggle="modal"><i class="fa fa-plus"></i> New Company</a>
这将成功触发此模态
<div id="modal-add-company" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
但是,该网址不会更改为domain.com/companies#modal-add-company
url domain.com/companies#modal-add-company也不会在重新加载时触发模态.
如何进行以下操作我需要做什么：
>每当我触发模态并显示模态时,将URL更改为domain.com/companies#modal-add-company,并且
>如果我直接输入url domain.com/companies#modal-add-company,则显示模态
解决方法
使用jQuery这可能是一个可行的解决方案
$(document).ready(function(){
$(window.location.hash).modal('show');
$('a[data-toggle="modal"]').click(function(){
window.location.hash = $(this).attr('href');
});
});
假设您有一个触发器来关闭模态,如下所示：
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
$('button[data-dismiss="modal"]').click(function(){
var original = window.location.href.substr(0,window.location.href.indexOf('#'))
history.replaceState({},document.title,original);
});
并且假设您希望转义按钮仍然能够关闭模态,并且还更改URL,整个代码块将如下所示：
$(window.location.hash).modal('show');
$('a[data-toggle="modal"]').click(function(){
window.location.hash = $(this).attr('href');
});
function revertToOriginalURL() {
var original = window.location.href.substr(0,window.location.href.indexOf('#'))
history.replaceState({},original);
}
$('.modal').on('hidden.bs.modal',function () {
revertToOriginalURL();
});
感谢https://stackoverflow.com/a/13201843/80353关于如何使用模态关闭事件.