通过 jquery 打开时，模式没有关闭

Posted 2023-03-14

【中文标题】通过 jquery 打开时，模式没有关闭

【英文标题】：Modal is not getting closed when opened through jquery

【发布时间】：2021-06-20 18:43:12

【问题描述】：

在这里，我想使用 Jquery 打开模态，并且模态已正确打开，但模态未关闭，但使用 data-target 时，模态已关闭..请帮我解决

 <button type="button" class="btn btn-info upload_notify_modal" data-toggle="modal" data dismiss="modal" data-backdrop="false">
         <i class="fas fa-plus"></i>
 </button>

<div class="modal" id="myModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
           <form action="/admin/update-access-upload-and-notification" method="POST">
                @csrf
                <!-- Modal Header -->
              <div class="modal-header">
                  <h4 class="modal-title">UPDATE UPLOAD AND NOTIFICATION</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
               
                  <button type="submit" class="btn btn-success" >Save</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
             </div>
          </form>
       </div>
     </div>
  </div>

这是脚本

<script>
$('.upload_notify_modal').click(function()
    $('#myModal').modal('show');
)

【问题讨论】：

对我来说工作得很好。您使用的是哪个 boostrap 版本？

@Swati bootstrap 4..现在它工作正常..另一个 js 文件正在与 jquery 文件协作

【参考方案1】：

<button type="button" class="btn btn-info upload_notify_modal" data-toggle="modal" data dismiss="modal" data-backdrop="false">
         <i class="fas fa-plus"></i>
 </button>

<div class="modal" id="myModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
           <form action="/admin/update-access-upload-and-notification" method="POST">
                @csrf
                <!-- Modal Header -->
              <div class="modal-header">
                  <h4 class="modal-title">UPDATE UPLOAD AND NOTIFICATION</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
               
                  <button type="submit" class="btn btn-success" >Save</button>
                  <button type="button" id="btn-close-modal" class="btn btn-danger" data-dismiss="modal">Close</button>
             </div>
          </form>
       </div>
     </div>
  </div>


<script>

 //For Open Modal
 $('.upload_notify_modal').on('click',function()
    $('#myModal').modal('show');
 );

 // For Close Modal
 $("#btn-close-modal").on('click',function()
     $('#myModal').modal('hide');
 );

</script>