在bootstrap模態ONCLICK事件中顯示動態內容

我有一個包含從mySQL數據庫生成的列表的表。每條記錄都有一個對應的視圖按鈕。我想在有人點擊視圖按鈕時在引導模式彈出窗口中顯示行信息。在bootstrap模態ONCLICK事件中顯示動態內容

問題 第一次點擊時不顯示彈出窗口模式。該模式顯示在第二次點擊。同樣在關閉模式並點擊另一個視圖按鈕後，模式將顯示先前選擇的內容。

有沒有其他解決方案可以解決這個問題？

我的主頁像

<div class="modal-container"></div> 


<table width="100%" border="1"> 

<?php 
for($i=1;$i<=10;$i++){ 
?> 
    <tr> 
    <td>Name</td> 
    <td>Location</td> 
    <td><a data-toggle="modal" href="#myModal" onclick="showmodal("<?=$i;?>","row_<?=$i;?>")">View</a></td> 
    </tr> 
<?php 
} 
?> 
</table>

的jQuery - >

function showmodal(id,category){ 
    var url = "remote.php"; 
    $('.modal-container').load(url,{var1:id,var2:category},function(result){ 


      $('#myModal').modal({show:true}); 
    }); 
}

remote.php

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Sample Model Box - Header Area</h4> 
      </div> 
      <div class="modal-body"> 
       <?php 
       echo $_REQUEST['var1']; 
       echo $_REQUEST['var2']; 
       ?> 
      </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</button> 
      </div> 
     </div> 
    </div> 
</div>

來源

2016-06-23 Jasir alwafaa

所以你只是想通過onpage錶行信息模態？ – Shehary

實際上，通過使用該參數，我想對remote.php做些什麼，並顯示到模態 –

我參考你的答案http://stackoverflow.com/questions/34693863/pass-php-variable-to-bootstrap-modal/34695333 ＃34695333，但我怎麼能通過多個參數 –

顯示莫代爾然後加載ajax的內容

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Sample Model Box - Header Area</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</button> 
      </div> 
     </div> 
    </div> 
</div> 

<table width="100%" border="1"> 
    <?php 
    for($i=1;$i<=10;$i++){ 
    ?> 
    <tr> 
     <td>Name</td> 
     <td>Location</td> 
     <td><a data-toggle="modal" data-target="#myModal" href="#myModal" data-id="<?=$i;?>" data-category="<?=$i;?>">View</a></td> 
    </tr> 
    <?php 
} 
?> 
</table> 

<script type="text/javascript"> 

$('#myModal').on('show.bs.modal', function (event) { 
    var clickedLink = $(event.relatedTarget); // clickedLink that triggered the modal 
    var id = clickedLink.data('id'); // Extract info from data-id attributes 
    var category = clickedLink.data('category'); // Extract info from data-category attributes 
    var modal = $(this); 
    modal.find('.modal-body').load('remote.php',{var1:id,var2:category}); 
}); 
</script>

來源

2017-01-21 04:34:20

在bootstrap模態ONCLICK事件中顯示動態內容

回答

相關問題