[英]Open Modal (bootstrap) from other html-file
我正在使用bootstrap
構建一個網站。 但我有點死路一條。 我已經從給定的例子中創建了一個模態(見下文)。 正如您可能看到的,這是從他們的網站直接采取的模式。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Nieuwe Taak toevoegen</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>
我用一個按鈕打開這個對話框。
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >
但我想將我的模態保存在單獨的aspx/html-files
。 如何將這些模態保存在不同的html/aspx - files
?
示例:如果按鈕位於index.Html
內,但模態位於newTaskModal.html
,我將如何打開模態? (如果兩者都在index.html內,那么沒有問題)
注意:我不/不能使用HTML5(公司標准)
如果你正在使用jquery,你可以使用ajax調用下載頁面:
$.ajax({
url: 'newTaskModal.html',
dataType: 'text',
success: function(data) {
alert(data);
// todo: add the html to the dom...
}
});
如果您正在構建單個頁面應用程序,則可能需要查看旨在解決此類問題的框架: durandal
你能用PHP嗎? 如果是這樣,有簡單的解決方案
您的索引將是index.php,並且您希望將模式放在此代碼中
<?php include "newTaskModal.html"; ?>
如果您使用JQuery將html頁面加載到匹配的元素中,也可以。
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
有關詳細信息,請訪問http://api.jquery.com/load/ 。
步驟1 使用以下代碼進行鏈接:
<a class="btn btn-primary" data-toggle="modal" href="MyModal.html" data-target="#MyModal" data-backdrop="static">OPEN MODAL</a>
步驟2 使用以下代碼進行模態窗口
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog model-sm">`enter code here
<div class="modal-content"> </div>
</div>
</div>
步驟3創建MyModal.html並放置一些文本。
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Modal Contents
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">OK</button>
</div>
注意:這可能不適用於本地html。 僅適用於服務器!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.