bootstrap引入彈窗後卻被陰影覆蓋如何解決

只需要在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>