提交后关闭引导模式

Posted 2023-05-08

【中文标题】提交后关闭引导模式

【英文标题】：Close bootstrap modal after submit

【发布时间】：2015-06-27 14:13:28

【问题描述】：

单击Delete 按钮后如何关闭引导模式？这是我的代码：

<div id="media_delete_confirmation" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirmation</h4>
      </div>

      <form id="modal-form">
        <div class="modal-body">
          <input id="media_action" value="deleteMediaAction" type="hidden"/>
          <p>Do you want to save changes you made to document before closing?</p>
          <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Keep</button>
          <button type="button" class="btn btn-default" id="modal_delete">Delete</button>
        </div>
      </form>
    </div>
  </div>
</div>

这是另一部分：

$("#modal_delete").click(function() 

  var id = $(".image-picker").val();
  var media_action = $("#media_action").val();

  $.ajax(
    type: 'POST',
    url: '?page=myMediaController&action=deleteMedia',
    data: 'media_id' : id,
    success: function(data) 
      $("#media_delete_confirmation").modal("hide");
    
  );
);

【问题讨论】：

你看到发生了什么？有什么错误吗？

如果你移动会发生什么 $("#media_delete_confirmation").modal("hide");到点击事件的开始？这不会解决任何问题，我只想知道模式是否响应隐藏事件，无论 ajax 调用如何。

你写的应该可以工作..检查控制台中的错误并在开发者工具的网络选项卡中检查失败的网络请求

网络和控制台都没有错误。我在网上找不到其他解决方案。请帮我解决这个问题。

@asdasdas 你的 Bootstrap 版本是什么？

【参考方案1】：

我遇到了同样的问题，并且能够以这种方式关闭模式对话框：

<div id="approveDialog" class="modal approveDialog hide">
    <!-- various form elements -->
    <div class="modal-footer pull-center">
            <a href="#" data-dismiss="modal" aria-hidden="true" class="btn">Back to Listings</a>    
            <button id="submitApprove" class="btn btn-success">Shop</button>
    </div>
</div>


$('button#submitApprove').on("click", function(event) 
    // submit form via ajax, then

    event.preventDefault();
    $('#approveDialog').modal( 'hide' );
);

【参考方案2】：

无需使用javascript隐藏模型，只需在按钮标签属性中使用data-dismiss="modal"即可，如下所示。

<div class="modal-footer">
  <button type="button" class="btn btn-primary" data-dismiss="modal">Keep</button>
  <button type="button" class="btn btn-default" id="modal_delete"  data-dismiss="modal">Delete</button>
</div>

【讨论】：

谢谢。这样就可以了。

很高兴帮助你交配！

不提交表单。(V3.)

【参考方案3】：

您可以简单地在提交时隐藏模式 $('#media_delete_confirmation').modal('hide'); //隐藏模态

【参考方案4】：

V3 你可以试试

 success: function(data) 
 // close modal
  $( '#media_delete_confirmation' ).modal( 'hide' ).data( 'bs.modal', null );
 // event after hidden
  $('#media_delete_confirmation').on('hidden', function()
      $(this).data('modal', null);  // destroys modal
  );

第 2 版

  $( '#media_delete_confirmation' ).remove();
  $( '.modal-backdrop' ).remove(); // removes the overlay

【参考方案5】：

我也遇到了同样的问题。我试图在提交后关闭一个模式窗口。我可以解决它的唯一方法是执行以下操作。

在成功函数中，我通过jQuery添加了这段代码：

success: function(respuesta)
    $('#btnGuardarCambios').attr("data-dismiss", "modal");

在“保存更改”按钮上，我使用了attr 方法。如果 ajax 成功，我只需添加一个新属性（data-dismiss）并设置它的值（模态），否则模态不会消失。

编辑：这不适用于 IE 和 Chrome，仅适用于 Mozilla：c

【参考方案6】：

在你写完这篇文章之前尝试<script>

$('#media_delete_confirmation').submit(function() 
        $('#media_delete_confirmation').modal('hide');
        );

【参考方案7】：

首先在此提交按钮中添加一个 id 或类，如 closemodel。然后添加另一个id 或第一个 div 中的类。然后添加这个jquery代码

<script>
$(document).ready(function() 
  $('#closemodel').click(function() 
    $('#CreateAccount1').modal('toggle');
  );
);
</script>