Question

我有导航标签

<li class="active"><a data-toggle="tab">First Tab</a></li>
<li><a data-toggle="tab">Second Tab</a></li>

我需要触发一个带有提示的模态，例如“你想在离开标签之前保存更改吗？”

<div id="prompt" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
                  aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        ...
                    </div>
                </div>
            </div>

我试图像

一样提升它

 $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
                    $('#prompt').modal('show');

                });

但它不会等待用户对提示做出反应。

如何点击标签点击等待用户的确认？如果可能的话

Answer 1

Check out this bootply

我在文档加载时使用了模态，但是相同的函数$('#myModal').modal();启动了你的模态。当用户单击模态上的保存按钮时，我还包括一个on click功能。

<强> jquery的

 $( document ).ready(function() {
    $('#myModal').modal();
});

$('#save').click(function() {
            //whatever happens when you save
});

<强> HTML

 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="save" type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

要将其更改为标签点击，请将名为clickSave的类添加到每个标签，然后使用以下函数启动模式：

$(".clickSave").click(function(){
    $('#myModal').modal();
});

然后在模态中切换到点击的下一个标签。看here如何使用javascript进行操作。

总体步骤：

点击标签打开模态（您需要存储点击的标签）
点击模式按钮关闭或保存设置
使用存储的标签和javascript导航到它

如果您使用此操作顺序，则在用户选择关闭或保存之前，该选项卡不会打开。

如何在选项卡上单击twitter bootstrap来触发提示模式

1 个答案: