Question

我想建立一个网站（完成）。然后我添加了至少30个按钮，当你按下第一个按钮时，一个简单的模态出现了关闭的功能，但当你按下第二个按钮时，同样的事情发生了！这只是另一个内容。

让我试着用糟糕的编程语言告诉你。

<div class="button" id="modal1">1</div>

如果pressed = "modal1"打开。

<div class="button" id="modal2">2</div>

îfpressed = "modal2"会打开不同的内容。

我会添加一些代码，但我没有比Bootstrap更长的时间：http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

Answer 1

如果您使用Bootstrap模式，您只需更改所有按钮的数据目标和crate模态。

Answer 2

只需查看此链接http://www.w3schools.com/bootstrap/bootstrap_modal.asp即可解释模态的工作原理。你必须在你点击打开模态的项目中有data-toggle =“modal”data-target =“＃myModal”，你需要提到“#myModal”作为目标模态的id，使用不同的id来打开不同的模态。

Answer 3

你可以看到我的三个模态，就像我说你只需要改变data-target="#myModal1" and id="myModal1" `https://jsfiddle.net/milanpanin/b2pyb6Lq/

Answer 4

使用您链接的样本，我将第一个模型div复制并粘贴到第二个模型div并进行了微小的更改，以便您在单击按钮时看到差异。然后我复制并粘贴了按钮，并更改了第二个按钮中的data-target属性以匹配我添加的div。

        <div class="container">
          <h2>Modal Example</h2>
          <!-- Trigger the modal with a button -->

            <!-- data-target in the first button matches the id of the first div below -->
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <!-- the second button data-target matches the id of thj e second div below -->
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
          <!-- Modal -->
          <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                  <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>

            </div>
          </div>

          <!-- this is copied from the first div, given its own id -->
           <div class="modal fade" id="myModal2" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Modal Header 2</h4>
                </div>
                <div class="modal-body">
                  <p>Some text in the modal. model 2</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>

            </div>
          </div>
        </div>

如何制作具有不同内容的模态

4 个答案: