关闭引导模式提出后 [英] Close bootstrap modal after submit

问题描述

如何关闭引导模式后，我点击删除按钮？这是我的code：

 ＆LT; D​​IV ID =media_delete_confirmation级=模式变脸＆GT;
  ＆LT; D​​IV CLASS =模式 - 对话＆GT;
    ＆LT; D​​IV CLASS =模式的内容＆GT;
      ＆LT; D​​IV CLASS =模式的首部＆GT;
        ＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
        ＆LT; H4类=模式的标题＆GT;确认＆LT; / H4＆GT;
      ＆LT; / DIV＆GT;

      ＆LT;形式ID =模式形式＆GT;
        ＆LT; D​​IV CLASS =模态体＆GT;
          ＆LT;输入ID =media_action值=deleteMediaAction类型=隐藏/＆GT;
          ＆LT; P＆GT;是否要保存所做关闭之前记录的更改＆LT; / P＆GT;
          ＆其中，P类=文本警告＆GT;＆LT;小＆GT;如果你不保存，您的更改将丢失＆LT; /小＆GT;＆LT; / P＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =模式躯＆GT;
          ＆LT;按钮式=按钮级=BTN BTN-主数据解雇=模式＆GT;保留＆LT; /按钮＆GT;
          ＆LT;按钮式=按钮级=BTN BTN默认ID =modal_delete＆GT;删除＆LT; /按钮＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; /形式GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

和这里的其他部分：

  $（＃modal_delete）。点击（函数（）{

  。VAR ID = $（图像选择器）VAL（）;
  。VAR media_action = $（＃media_action）VAL（）;

  $阿贾克斯（{
    键入：POST，
    网址：'？页=的myMediaController和放大器;行动= deleteMedia'，
    数据：{media_id：ID}，
    成功：功能（数据）{
      $（＃media_delete_confirmation）模式（隐藏）。
    }
  }）;
}）;
 

解决方案

没有必要隐瞒使用JavaScript的模型，你可以简单地使用数据驳回按钮标记属性=莫代尔如下：

 ＆LT; D​​IV CLASS =模式躯＆GT;
  ＆LT;按钮式=按钮级=BTN BTN-主数据解雇=模式＆GT;保留＆LT; /按钮＆GT;
  ＆LT;按钮式=按钮级=BTN BTN默认ID =modal_delete数据解雇=模式＆GT;删除＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

How can I close the bootstrap modal after I click on the Delete button? Here's my code:

<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>

and here's the other part:

$("#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");
    }
  });
});

解决方案

No need to hide model using javascript, you can simply use data-dismiss="modal" in the button tag attribute as follows.

<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>

这篇关于关闭引导模式提出后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！