bootstrap引入弹窗后却被阴影覆盖如何解决

最新推荐文章于 2022-05-02 15:32:29 发布

金刚大力士

最新推荐文章于 2022-05-02 15:32:29 发布

阅读量835

点赞数

分类专栏： css常见问题文章标签： bootstrap引入弹窗后却被阴影覆盖如何解决引入插件的弹窗后却被阴影覆盖如何解决

本文链接：https://blog.youkuaiyun.com/qq_42177730/article/details/84975043

版权

css常见问题专栏收录该内容

10 篇文章

订阅专栏

解决 Bootstrap 弹窗被阴影遮挡的问题，只需在 CSS 中为 .modal-backdrop 设置 z-index 为 0。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只需要在css中添加 .modal-backdrop{z-index:0;} 即可

<div class="personalinfo" hidden>
   <ul class="">
    <li data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">修改信息</li>
    <li  class="btnOut">退出</li>
   </ul>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="changeinfo">
   <div class="modal-dialog">
      <div class="modal-content" style="padding:10px 20px;">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="changeinfo"><i class="icon wb-tag" aria-hidden="true"></i>个人信息修改</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="">用户名:</label>
                <input type="text" class="form-control" id="">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="">原密码:</label>
                <input type="text" class="form-control" id="">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="">新密码:</label>
                <input type="text" class="form-control" id="">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>