2016-04-12 136 views
1

我有一个简单的模式,我从Bootstrap示例代码。它是这样的:让手机关闭引导按钮关闭引导模式

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

我希望能够与后退按钮关闭该模式在手机上,因为它占据了整个页面在移动设备上,并搜索“X”在顶部对不是很方便。我查看了文档,但只有一个选项可以通过键盘上的Escape键关闭模式,而对于移动设备则无此类解决方案。任何人都可以帮我吗?

+0

我不知道移动开发,但如果你能抓住后退按钮按下的事件,那么你可以触发模式关闭事件。 –

+0

这是一个网站。我只需要这个在移动后退按钮上工作。它具有与按下页面上的后退按钮相同的功能。我只是不知道如何捕捉所述行动或利用它。 –

回答

1

虽然我会建议关闭该模式用一个简单的X或关闭按钮,你应该能够通过收听事件:

$(window).on("navigate", function (event, data) { 
    var direction = data.state.direction; 
    if (direction == 'back') { 
    // do something 
    } 
    if (direction == 'forward') { 
    // do something else 
    } 
}); 

你要听导航事件和state.direction。

你有没有想过将X保存在模态的静态头文件中?内容是可滚动的。

+0

这样做会比较容易,我已经考虑过了,但是我正在为此设置的人员希望能够通过手机上的后退按钮关闭模式 –

+0

@MihailIvanchev - 够公平的,请尝试上述方法。如果有帮助,不要忘记将upvote/mark标记为答案。 –

+0

我已完成以下操作: '' 不起作用 我也尝试通过id挂钩模式,但它仍然不起作用(例如:#myModalHorizo​​ntal而不是.modal) –