我有这样的按钮
<form action="/category" method='GET'>
<button type="submit" class="btn btn-default render">
name
</button>
</form>
并且我有一些javascript,每当按钮被点击时启动一个模态…这只是让用户知道下一页正在加载.
<script type='text/javascript'>
$(document).ready(function(){
$(".render").click(function(evt){
$('#render_page').modal('show');
});
});
</script>
这是模态的html
<div class="modal fade" id="render_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Rendering Page... </div>
</div>
</div>
</div>
</div>
</div>
这一切在Firefox和Chrome上都可以正常工作,但是Safari不会显示模态？如果我把表单放在按钮中,它将启动模态,但它不会提交表单.所以这两个方面,表单提交和模式都可以做,但是safari不想这样做？
解决方法
尝试这个
<script type='text/javascript'>
$(document).ready(function(){
$(".render").click(function(evt){
evt.preventDefault();
$('#render_page').modal('show');
});
});
</script>
https://jsfiddle.net/y64qyjzo/
更新：添加了一个定时器,允许用户注意到模态：
$(document).ready(function() {
$(".render").click(function(evt) {
evt.preventDefault();
$('#render_page').modal('show');
setTimeout(function() {
$('#testForm').submit();
},1000)
});
});
(将id’testForm’添加到表单中)
https://jsfiddle.net/y64qyjzo/3