如何使用 js 确认的选项制作模态窗口？答案

【问题标题】：How to make a modal window with options as js confirm?如何使用 js 确认的选项制作模态窗口？
【发布时间】：2017-02-04 20:21:32
【问题描述】：

如何制作带有js确认选项的模态窗口？

例如，我有这个：<a href="/calc-delete.php?" onclick="return confirm('Do you want to remove?')">Delete</a>

如何使用模态窗口来做类似我的示例的操作？如果它是一个引导模式窗口并且答案会显示在同一个模式窗口中，那就太酷了

【问题讨论】：

confirm delete using bootstrap 3 modal box的可能重复

标签： javascript php jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

“触发器”部分：

要触发模态窗口，需要使用按钮或链接。

然后包含两个data-*属性：

data-toggle="modal"打开模态窗口
data-target="#myModal"指向模态的id

“模态”部分：

模态的父 <div> 必须具有与用于触发模态（“myModal”）的 data-target 属性的值相同的 ID。

.modal 类将<div> 的内容识别为模态并为其带来焦点。

.fade 类添加了淡入淡出模式的过渡效果。如果您不想要此效果，请删除此类。

role="dialog" 属性提高了使用屏幕阅读器的人的可访问性。

.modal-dialog 类设置模态框的正确宽度和边距。

“模态内容”部分：

<div> 和 class="modal-content" 设置模式的样式（边框、背景颜色等）。在这个<div> 中，添加模态框的页眉、正文和页脚。

.modal-header 类用于定义模态标题的样式。标题内的<button> 有一个data-dismiss="modal" 属性，如果您单击它会关闭模式。 .close 类为关闭按钮设置样式，.modal-title 类为标题设置适当的行高。

.modal-body 类用于定义模态体的样式。在此处添加任何 HTML 标记；段落、图片、视频等。

.modal-footer 类用于定义模式页脚的样式。注意这个区域默认是右对齐的。

【讨论】：

【解决方案2】：

试试这个，

HTML

<form action ="#" method="POST">
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>

JAVASCRIPT

  $('button[name="remove_levels"]').on('click', function(e){
        var $form=$(this).closest('form');
        e.preventDefault();
        $('#confirm').modal({ backdrop: 'static', keyboard: false })
            .one('click', '#delete', function (e) {
                $form.trigger('submit');
            });
    });

DEMO

对于多个按钮（同一型号上的多个链接）

DEMO

【讨论】：

如果我在模态窗口中点击删除，他要去哪里？怎么写？
@TriSTaR : 在表单操作中（
）。
谢谢）效果很好...一个问题是如何做到这一点：单击单独文件中的删除按钮显示：数据已成功删除..因为它在同一个模式窗口中显示?

【解决方案3】：

w3c 学校有一篇关于如何创建模态的非常好的文章

http://www.w3schools.com/howto/howto_css_modals.asp

您所要做的就是使用onclick=return openModal() 打开模态框，然后通过模态框中的 OK 按钮处理 php 调用。

【讨论】：