页面中的多个引导模式窗口

我需要在一个页面中引导多个引导3模式。我改变每个模式框的ID和这个工作，但IDs must be unique。页面中的多个引导模式窗口

HTML：

<span class="filesicon"><a data-target="#myModal-1" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span> 
<span class="filesicon"><a data-target="#myModal-2" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span> 

<div class="modal fade" id="myModal-1"> 
    <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">Modal title</h4> 

      </div> 
      <div class="modal-body" style="padding:0px; margin:0px width: 560px;"> 
       <iframe width="560" height="400" src="" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="modal fade" id="myModal-2"> 
    <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">Modal title</h4> 

      </div> 
      <div class="modal-body" style="padding:0px; margin:0px width: 560px;"> 
       <iframe width="560" height="400" src="" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe> 
      </div> 
     </div> 
    </div> 
</div>

我的路是正确的？如果不是，请告诉我更好的方法。

来源

2014-09-12 Pink Code

这是将多个模态放在一个页面上的正确方法。根本没有避免它。

你会以同样的方式调用每个模态，只需更改data-target以反映所需的模态显示。

<a href="#" class="list-group-item" id="myModal-1-link" data-toggle="modal" data-target="#myModal-1">Modal 1</a> 
<a href="#" class="list-group-item" id="myModal-2-link" data-toggle="modal" data-target="#myModal-2">Modal 2</a>

没有任何其他的方式来做到这一点，不与引导，但我敢肯定有对情态动词是simplier，但我怀疑他们会与引导工作，使流畅的其他选项。

来源

2014-09-12 12:31:47

如果使用额外的插件是一个选项，你认为bootbox.js？

它允许您使用几行javascript而不是笨重的HTML来显示引导模式。

为例，说明自举模式要求用户确认一些行动：

bootbox.confirm("Are you sure?", function(result) { 
    Example.show("Confirm result: "+result); 
});

http://bootboxjs.com/

来源

2014-09-12 13:22:17 ChaoticNadirs

我用你的代码bootply，似乎很好地工作。也许有别的东西在你的代码与情态动词

或者搞乱尝试

<script> $('#myModal-1').modal(options) $('#myModal-2').modal(options) </script>

到initate。这就像我在类似情况下所做的那样。

来源

2014-09-12 14:54:27 Turqueso

页面中的多个引导模式窗口

回答

相关问题