在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事件中显示动态内容

回答

相关问题