Question

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

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

如何做我的例子，但有模态窗口？如果它是一个自举模态窗口并且答案会显示在同一个模态窗口中，那将会很酷

Answer 1

试试这个，

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

Answer 2

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

＆＃34;触发＆＃34;部分：

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

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

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

＆＃34;模态＆＃34;部分：

模态的父<div>必须具有与用于触发模态的数据目标属性的值相同的ID（＆＃34; myModal＆＃34;）。

.modal类将<div>的内容标识为模态，并将重点放在其上。

.fade类添加了一个过渡效果，它会逐渐淡化模态。如果您不想要此效果，请删除此类。

属性role="dialog"改善了使用屏幕阅读器的用户的可访问性。

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

＆＃34;模态内容＆＃34;部分：

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

.modal-header类用于定义模式标题的样式。标题内的<button>具有data-dismiss="modal"属性，如果单击它，它将关闭模态。 .close类设置关闭按钮的样式，.modal-title类使用正确的行高设置标题样式。

.modal-body类用于定义模态体的样式。在这里添加任何HTML标记;段落，图像，视频等。

.modal-footer类用于定义模态页脚的样式。请注意，默认情况下，此区域右对齐。

Answer 3

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

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

您需要做的就是使用onclick=return openModal()打开模态，并通过模式中的确定按钮处理php调用。

如何使用js选项创建模态窗口？

3 个答案: