bootstrap-modal问题

本文说下bootstrap modal模态框的显示和关闭问题。

1. 打开

   <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#addModal"><img src="/static/images/plus.svg" /> 新增  </button>
   
   <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
       <div class="modal-dialog" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <h4 class="modal-title" id="addModalLabel">新增付费内容</h4>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true">x</span>
                   </button>
               </div>
               <div class="modal-body">
                   <p>请输入以下内容</p>
                   <form id="addQRCode" action="/addQRCode">
                       <div class="input-group input-group-sm mb-3">
                           <select class="form-select input-group-text" id="select_content_type" style="font-size: 14px;" aria-label="Default select example">
                             <option value="0" selected>请选择内容类型 </option>
                             <option value="1">密码</option>
                             <option value="2">链接</option>
                             <option value="3">文章</option>
                           </select>
                       </div>
                       <div class="input-group input-group-sm mb-3">
                         <span class="input-group-text" style="font-size: 14px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;">内容</span>
                         <input type="text" class="form-control" id="input_content" style="border: 1px solid #ced4da;" placeholder="请输入内容" aria-label="input_content" aria-describedby="input_content">
                       </div>
                       <div class="input-group input-group-sm mb-3">
                         <span class="input-group-text" style="font-size: 14px;border-top-right-radius: 0px;border-bottom-right-radius: 0px">金额</span>
                         <input type="text" class="form-control" id="input_amount" style="border: 1px solid #ced4da;" placeholder="请输入金额" aria-label="input_amount" aria-describedby="input_amount">
                       </div>
   <!--                    <div class="input-group input-group-sm mb-3">-->
   <!--                      <span class="input-group-text" style="font-size: 14px;border-top-right-radius: 0px;border-bottom-right-radius: 0px" id="qrcode_org">支付二维码（请设置金额）</span>-->
   <!--                      <input type="text" class="form-control" style="border: 1px solid #ced4da;" placeholder="请上传支付二维码" aria-label="qrcode_org" aria-describedby="qrcode_org">-->
   <!--                    </div>-->
                       <p>请上传支付二维码（记得设置金额与上面的金额一致）</p>
                       <div class="input-group">
                         <input type="file" class="form-control" id="input_file" onchange="getFilePath()" style="border: 1px solid #ced4da;" aria-describedby="inputGroupFileAddon04" aria-label="Upload" />
   <!--                      <button class="btn btn-outline-secondary" style="font-size: 14px;border: 1px solid #ced4da;" type="button" id="inputGroupFileAddon04">上传</button>-->
                       </div>
                       <ul id="scan_result"></ul>
                   </form>
                   <canvas id="qrcanvas" style="display:none;"></canvas>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
                   <button type="button" class="btn btn-outline-primary btn-sm" id="submitBtn" onclick="submit()">保存</button>
               </div>
           </div>
       </div>

js:

<script>
$("#submitBtn").on("click", function () {
    $('#myModal').modal('hide');
});</script>

2. 关闭
   填写完模态框中的表单后，点击保存按钮，内容保存后，模态框关闭了，但是页面变成灰色了，无法操作任何按钮
   

解决办法：

<script>
$("#submitBtn").on("click", function () {
    $('#myModal').modal('hide');
    $('modal-body').removeClass('modal-open');
    $('.modal-backdrop').remove();
});</script>