如何使用遠程內容中的按鈕關閉模式？

這裏是原來的頁面，index.html的：

<a href="modal.html" data-toggle="modal" data-target="#testModal">open modal</a> 
<div id="testModal" class="modal fade"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 

    </div> 
    </div> 
</div>

，這裏是我想要的模式，打開網頁，modal.html：

<p>Hi, I am a modal</p> 
<button class="btn btn-primary">close</button> 

<script type="text/javascript"> 
    $(function() { 
    $("#closeModal").click(function() { 
     // do something...(Ajax) 
     $("#testModal").modal('hide'); 
    }); 
    }); 
</script>

，我想關閉按鈕關閉index.html中的模式，但不使用data-dismiss。以下是Plunker的完整示例：http://plnkr.co/edit/EGjtma?p=info

來源

2016-11-14 Lynn Chen

閱讀：http://stackoverflow.com/questions/16493280/close-bootstrap-modal – ZiTAL

@ZiTAL待辦事項你的意思是使用'toggle'關閉模式？我已經設置了「切換」，但我仍然希望按鈕能夠關閉模式。 –

「功能」不正確，使用「功能」並打開瀏覽器中的控制檯觀看錯誤，對於Firefox使用螢火蟲 – ZiTAL

我檢查過你的代碼，並且我發現模式所做的是將整個modal.html文件的內容進行抓取，並將其放在類名爲「莫代爾內容」

所以這是很容易的，你可以在modal.html文件中的關閉按鈕編寫代碼，這將讓你關閉模式

<button class="btn btn-primary" onclick="$('#testModal').hide()">close</button>

而且我有幾個注意事項爲你

有跡象表明，你已經加入了許多劇本，我不知道，你需要
你的代碼中包含一些JavaScript錯誤，因此檢查瀏覽器的控制檯來解決這些問題
不要重複JS/CSS包括modal.html，如果這些文件已經存在於主文件中，則不需要再次添加它們。

來源

2016-11-14 08:44:33

謝謝你的回答和筆記。但是如果我在關閉模式之前需要做些什麼呢？我更新了我的問題。 –

@LynnChen很高興，你可以創建一個方法如下|函數closeModal（）{//您的邏輯然後$（'＃testModal'）。hide（）; } |並使按鈕單擊指向此功能 –

這種方式可以立即關閉模式，但如果//做某事......包含Ajax函數，我想在Ajax完成後關閉模態，有沒有解決方案？ –

 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

什麼也不做任何功能，解除模式是集結在自舉

來源

2016-12-14 03:14:06

如何使用遠程內容中的按鈕關閉模式？

回答

相關問題