为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我按esc和点击背景的时候,只有弹出框消失了,背景色还在?

/ 猿问

为什么我按esc和点击背景的时候,只有弹出框消失了,背景色还在?

weixin_大山_1 2018-04-11 13:45:17

<button class="btn btn-primary" type="button" data-toggle="modal" data-target=".modal-lg" >

大的模态弹出框

</button>

<div class="modal fade modal-lg" tabindex="-1" aria-hidden="true" role="modal-dialog" data-keyboard="true" data-backdrop="true">

        <div class="modal-dialog   modal-lg">

            <div class="modal-content">

                    <div class="molda-header">

                        <button class="close" type="button" data-dismiss="modal">

                                <span aria-hidden="true">&times;</span>

                                <span class="sr-only">close</span>

                        </button>

                        <h4 class="modal-title">动态模拟弹出框</h4>

                  </div>

                 <div class="modal-body">

                        <p>弹出框主体</p>

                </div>

                <div class="modal-footer">

                        <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button>

                        <button class="btn btn-primary" type="button">保存</button>

                </div>

        </div>

    </div>

</div>



查看完整描述

2 回答

已采纳
?
caocao485

首先,说下原理,modal显示时会添加一个半透明蒙层。

因为你在两个div中添加了modal-lg,而data-target=".modal-lg"就导致modal显示时添加了两个蒙层,所以esc和点击背景的时候,只是去掉了一个蒙层,还有一个蒙层没有去掉,导致半透明背景依然存在。           

出现这样的问题是因为你没有正确设置data-target,保证data-target设定的元素唯一即可(即类名modal的div)。

<button class="btn btn-primary" type="button" data-toggle="modal" data-target=".bs-example-modal-lg"> 大的模态弹出框 </button> 
  <div class="modal fade bs-example-modal-lg" tabindex="-1" aria-hidden="true" role="modal-dialog" data-keyboard="true" data-backdrop="true"> 
   <div class="modal-dialog  modal-lg "> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button class="close" type="button" data-dismiss="modal"> <span aria-hidden="true">&times;</span> <span class="sr-only">close</span> </button> 
      <h4 class="modal-title">弹出框</h4> 
     </div> 
     <div class="modal-body"> 
      <p>弹出框主体</p> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button> 
      <button class="btn btn-primary" type="button">保存</button> 
     </div> 
    </div> 
   </div> 
  </div>

看下data-target,然后你的molda-header也写错。

查看完整回答
反对 2018-05-10
?
丑牛小轩

缩进改一下 看的好难受

查看完整回答
反对 2018-04-11

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信