bootstrap中2个modal弹框

时间:2019-01-16
本文章向大家介绍bootstrap中2个modal弹框,主要包括bootstrap中2个modal弹框使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

bootstrap的modal 1上弹出modal 2,modal 2上弹出一个iview的确认框;

```
<script>
 	setModalsAndBackdropsOrder:function() {

          var modalZIndex = 1040;
          $('.modal.in').each(function(index) {
              var $modal = $(this);
              modalZIndex++;
              $modal.css('zIndex', modalZIndex);
              $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
          });
          $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
          
 	 }
 </script>
```

借鉴1自:https://blog.csdn.net/k358971707/article/details/71908862?utm_source=blogxgwz2
借鉴2自:https://blog.csdn.net/wzp6010625/article/details/78728894?utm_source=blogxgwz5
然后将对应的第一个modal 1的id,以及触发弹出modal 1 的方法中,将对应的设置z-index的方法加上

showModalOne: function (data) {
       
        $('#modalOne').on('show.bs.modal', '.modal', function(event) {
            $(this).appendTo($('#modalOne'));
        }).on('shown.bs.modal', '.modal.in', function(event) {
            setModalsAndBackdropsOrder();
        }).on('hidden.bs.modal', '.modal', function(event) {
            setModalsAndBackdropsOrder();
        });
        $('#modalOne').modal('show');
      },
<div class="modal fade bs-example-modal-lg" id="modalTwo" tabindex="-1" role="dialog" aria-labelledby="modalTwoLabel"
    aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header"> <!--data-dismiss="modal"-->
          <button type="button" class="close"  @click="hidemodal('modalTwo')"  aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="modalTwoLabel">
           弹窗2
          </h4>
        </div>
        <div class="modal-body">
        
        </div>
        <div class="modal-footer form-group" style="text-align:left">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-primary">保存</button>
            <button type="button" class="btn btn-default" @click="hidemodal('modalTwo')">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
<script>
//对应的script方法中将hidemodal方法加上
	hidemodal: function (id) {
        $('#' +id).modal('hide');
      },
</script>

如果还有iview的确认框

this.$Modal.confirm(config);
//在确认框弹窗来之后,将对应的z-index的进行调整
</script>
$('.ivu-modal-wrap').css('z-index','1601');
$('.ivu-modal-mask').css('z-index','1601');