使用引導模態，而不是彩盒

我有以下的javascript觸發顏色框打開特定的PHP頁面與服務器上的參數：使用引導模態，而不是彩盒

$(document).ready(function() { 
    $('#example tbody').on('click', 'input', function() { 
     var data = table.row($(this).parents('tr')).data(); 

     $(".iframe").colorbox({iframe:true, width:"700px", height:"80%", href:"session_edit.php?ID="+data[0]}); 
     $(".iframe2").colorbox({iframe:true, width:"700px", height:"80%", href:"index_b.html?ID="+data[0]}); 
     $(".iframe3").colorbox({iframe:true, width:"300px", height:"20%", href:"delete.php?ID="+data[0], onLoad: function() { 
      $('#cboxClose').remove()   
     }}); 

    }); 
});

不，我想利用引導的模態，而不是顏色框。我曾嘗試：

$("#iframe").modal('show');

但它不工作，不知道還如何指定ID爲PHP文件=

任何想法，我怎麼能解決這個問題嗎？？

感謝

來源

2015-09-18 elstiv

你包括bootstrap.js嗎？ –

是的，我包括'' – elstiv

看看這個小提琴來看看如何使用引導模式：http://jsfiddle.net/3kgbG/974/ – DTH

你的問題是有點不清楚什麼是不工作，但我認爲你正試圖加載遠程PHP文件到引導模式未顯示就像在顏色框，並要更換彩盒自舉模式

你可以添加遠程文件像這裏面的引導模式的呼叫按鈕href="session_edit.php?ID=<?php echo $id;?>">並指定與α-ID的PHP文件=

<button class="btn btn-primary" data-toggle="modal" data-target="#iframe" href="session_edit.php?ID=<?php echo $id;?>">Open Modal</button>

你並不需要jQuery來調用模式，讓引導默認莫DAL功能做的工作

要觸發模式窗口，你需要包含兩個數據 - *屬性：

data-toggle="modal" //opens the modal window 
data-target="#iframe" //points to the id of the modal

所以你不需要這個jQuery代碼，顯示自舉模式

$("#iframe").modal('show');

和HTML模式將是

<div class="modal fade" id="iframe" tabindex="-1" role="dialog"> 
<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     //Content loads here 
    </div> 
</div> 
</div>

也在遠程PHP文件就可以了添加moda-header，modal-body和modal-footer

遠程PHP session_edit.php

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title"><center>Heading</center></h4> 
</div> 
<div class="modal-body"> 
    //Show what ever content here you like it will load into the modal 
</div> 
<div class="modal-footer"> 
    <button type="button" class="btn btn-default">Submit</button> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
</div>

在最後，你可能需要刷新模式的內容，如果你正在處理同一個頁面上的多個模態，而不刷新頁面

<script> 
$(document).ready(function() { 
    $('#iframe').on('hidden.bs.modal', function() { 
      $(this).removeData('bs.modal'); 
    }); 
}); 
</script>

希望得到這個幫助。

來源

2015-09-18 08:35:21 LeadsArchive

使用引導模態，而不是彩盒

回答

相關問題