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

Posted 2023-02-24

【中文标题】在引导模式 ONCLICK 事件中显示动态内容

【英文标题】：Show dynamic content in bootstrap modal ONCLICK event

【发布时间】：2016-10-25 06:54:23

【问题描述】：

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

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

是否有任何替代解决方案来克服这个问题？

我的主页喜欢

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


<table  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>

【问题讨论】：

所以你只想将onpage表格行信息传递给modal？

实际上通过使用该参数我想在 remote.php 上做一些事情并显示到模态

我参考你的答案***.com/questions/34693863/…，但是我如何传递多个参数

试试这个答案***.com/questions/32433765/…，最后检查“传递页面信息”，在cmets中，有小提琴示例

【参考方案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  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>