2016-04-12 140 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) –