Question

我有个人资料列表页面。在页面内部，它具有带有数据目标.popupmessage的模态。问题是我将使用与我的配置文件相同的类。客户端按模式时如何具体？因为当我点击按钮模态以显示模态时，所有模态都显示出来

<div class="col-xs-3">
  <div class="profile thumbnail">
    <img src="http://placehold.it/450x150">

    <button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage">
      Message
    </button>
    <div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" aria-hidden="true"></span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="col-xs-3">
  <div class="profile thumbnail">
    <img src="http://placehold.it/450x150">

    <button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage">
      Message
    </button>
    <div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" aria-hidden="true"></span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

继承人的榜样 http://www.bootply.com/95vPZK1rN8

我想在.popUpMessage的末尾添加一个数字所以像循环每个.popUpMessage将是这样的.popUpMessage1，.popUpMessage2，.popUpMessage3，.popUpMessage。但我好心地卡住了。继承剧本

var start=1;
  var max=9999;

  for(start;start<=max;start++){
  //i stuck on the condition
}

Answer 1

据我所知，Bootstrap不会以这种方式支持多种模态。每个data-target属性都必须指向一个特定且唯一的模态。否则（那就是你现在的问题），Bootstrap会显示所有这些。

一个简单的方法可能看起来像this，只需将您的个人data-target和容器class重命名为popUpMessage(x, y, z)。

话虽这么说，你也提到你害怕上课太多。在这种情况下，您可以使用一些JavaScript魔法并在加载页面后动态定义类。

修改由于您使用的是Bootstrap，因此您还可以使用jQuery及其.each()函数。通过这样做，您可以遍历每个元素（通过选择器指定）并更改其属性，如data-target和class。

查看this。

在同一页面中为数据目标模态使用相同的类

1 个答案: