Question

我有一个包含从mySQL数据库生成的列表的表。每个记录都有一个与之对应的视图按钮。当有人点击视图按钮时，我想在bootstrap模式弹出窗口中显示行信息。

问题 首次点击时不显示弹出模式。第二次点击时会显示模态。关闭模态并单击另一个视图按钮后，模态也会显示以前选择的内容。

有没有其他解决方法可以解决这个问题？

我的主页

<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 - ＆gt;

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>

Answer 1

显示模态，然后加载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>

在bootstrap模式ONCLICK事件中显示动态内容

1 个答案: