模态没有得到不同的ID答案

【问题标题】：modal doesnt get different id模态没有得到不同的ID
【发布时间】：2017-06-27 08:20:38
【问题描述】：

我有许多按钮可以打开相同的引导模式。脚本文件（JS）需要从主文件调用还是从模态文件调用？

我在模态中调用 js 文件，包括“jquery-1.11.1.min.js”文件，因此只有我发送到模态的第一个 id 被捕获。我做了例子：

http://80.179.226.44/~israelig/sites/exmytrip/tempFile.php （尝试点击多次）

我需要模态框内的“jquery-1.11.1.min.js”，因为我希望“上传图像”脚本工作

我需要不同的 id 发送到模态。我该如何解决？

主文件：

<li><a href="modalFile.php?id=1" data-toggle="modal" data-target="#myModal"> Send value "1" to modal</a></li>
<li><a href="modalFile.php?id=2" data-toggle="modal" data-target="#myModal"> Send value "2" to modal</a></li>
<li><a href="modalFile.php?id=3" data-toggle="modal" data-target="#myModal"> Send value "3" to modal</a></li>


<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-md">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title for modal</h4>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

</body>

<script>
    // clear model content
    $('body').on('show.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
    });
</script>

您可以在此处查看模态代码：

http://80.179.226.44/~israelig/sites/exmytrip/modalFile.php?id=2

【问题讨论】：

标签： php jquery twitter-bootstrap

【解决方案1】：

不要使用href="url" 我通常设置href="javascript:;" 现在使用数据属性例如data-id="1" 现在你需要做这样的事情 http://getbootstrap.com/javascript/#modals-related-target

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var id= button.data('id') // Extract info from data-* attributes

  //I'm guess that you want some dynamic content - so perhaps an ajax call and replace your elements

})

是的，然后您可以使用id 替换元素或设置值。或者也许发送一个 ajax 调用来获取一些更复杂的内容。如果您正在执行 ajax 调用，则有一个加载栏来帮助使用 - 在加载时显示并在加载后隐藏。你可以在这里做一个http://www.ajaxload.info/

【讨论】：