如何使一个模态窗口的选项作为js确认 - How to make a modal window with options as js confirm?

How to make a modal window with options as js confirm?

如何使一个模态窗口的选项作为js确认?

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

如何做一些像我的例子，但与模态窗口?这将是很酷，如果它将是一个引导模态窗口，答案将显示在相同的模态窗口

try this，

<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'); }); });

用于多个按钮(同一型号上的多个链接)

w3c学校有一篇关于如何创建模态的很好的文章
http://www.w3schools.com/howto/howto_css_modals.asp
你所要做的就是用你的onclick=return openModal()打开模态，并处理你的OK按钮在你的模态中的php调用。

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</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>
"Trigger"部分:

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

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

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

"Modal"部分:

模态的父<div>必须具有与用于触发模态的data-target属性("myModal")的值相同的ID。

.modal类将<div>的内容标识为模态，并使其成为焦点。

.fade类添加了一个过渡效果，将模态淡入淡出。如果您不想要这个效果，请删除这个类。

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

.modal-dialog类设置了适当的宽度和边距。

"Modal content"部分:

<div>与class="modal-content"样式的模态(边界，背景颜色等)。在这个<div>中，添加模态的页眉、正文和页脚。

.modal-header类用于定义模态头部的样式。标题中的<button>有一个data-dismiss="modal"属性，如果你点击它，它会关闭模态。close类设置了关闭按钮的样式，.modal-title类设置了合适的行高的标题样式。

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

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