引导多个模式按钮

Bootstrap Multiple Modal Buttons

本文关键字：模式 按钮      更新时间：2023-09-26

我有四个网格，在每个网格中我都有一个按钮，我希望它有自己独特的模态。然而，每当我尝试使用 Bootstrap 的模态时，我只会显示第一个按钮的数据，即使我可能正在单击应该显示不同模态的不同按钮。

我是第一次使用模态，所以我直接基于 Bootstrap 网站上的示例。我复制了四次以下代码，唯一的区别是按钮的名称、模态标题和模态主体。谁能告诉我我需要更改什么才能在同一页面中拥有四个独特的模态？

<div class="col-md-3">
        <div class="head">
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Button1</button>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">First Log</h4>
                        </div>
                        <div class="modal-body">
                            Test
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mediumSpacer"></div>
    </div>

每个模态应该有不同的 id，每个按钮的数据目标应该是每个模态的 id。

例： 

 <div id="myModal1"class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                        <div class="modal-header">....</div>
                        <div class="modal-body">...</div>
                        <div class="modal-footer">...</div>
                </div>
            </div>
 </div>
 <div id="myModal2"class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                        <div class="modal-header">....</div>
                        <div class="modal-body">...</div>
                        <div class="modal-footer">...</div>
                </div>
            </div>
 </div>

每个按钮应如下所示： 

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Button1</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Button1</button>
相关文章：