需要Jquery帮助来修复模态弹出窗口

Question

我需要的是什么？

1. on click me我需要弹出一个save按钮。
2. 在save按钮上单击我需要在主弹出窗口关闭后再次确认弹出窗口

我得到的是什么？

我能够获得一步并且保存点击我正在获得确认弹出窗口。 问题是当我点击x图标时，我也会收到确认弹出窗口。我只需要在保存按钮上弹出确认。不是点击x图标。

有线情况？

我第一次点击x时没有收到确认弹出窗口。

＆＃13;
＆＃13;
$(document).on('click','.closeMyModal',function(){
  $("#myModal").on('hidden.bs.modal', function(){
    //alert('Hidden');
    $('#employeekipsave').modal('show');
    //alert('visible');
  });
})
＆＃13;
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<a href="javascript:void(0);" data-toggle="modal" data-target="#myModal">Click Me</a>
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-large" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Employee KPI's</h4>
      </div>
      <div class="modal-body">
       	 Dummy Text Comes Here
      </div>
      <div class="modal-footer">
        <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
        <button type="button" class="btn btn-primary closeMyModal" data-dismiss="modal" >Save</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="employeekipsave">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body clearfix">
        <div class="col-lg-12 text-center success-popup">
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h5 class="text-success">Are you sure you want save Employee KPI's?</h5><button type="button" class="btn defaultBtn btn-sm  btn-defult" data-dismiss="modal" aria-label="Close">No</button><button type="button" class="btn btn-primary btn-sm defaultBtn" data-dismiss="modal" id="employeeKpiSuccess" style="margin-left:5px;" >Yes</button>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

$("#myModal").on('hidden.bs.modal', function(){ });注册一个事件监听器，每当模态被隐藏时它就会运行，你会发现如果你已经点击了Save按钮，你只会得到奇怪的行为，因为它会注册这个事件监听器。删除它，它将100％工作。

添加事件监听器，用于何时显示第二个模态以将类modal-open添加到body标签，该标签通常会自动添加，但似乎是当您显示模式时发生的错误虽然第一种模式逐渐消失的过渡仍然存在。 （显示第二个模态时会添加模态打开类，但之后第一个模态的淡入淡出过渡完成，将其从body标签中删除）

编辑：这也不起作用，使用淡入淡出过渡的事件触发似乎有些错误 从第一个模态中删除淡入淡出类可以解决滚动条问题。

$(document).on('click','.closeMyModal',function(){
    //alert('Hidden');
    $('#employeekipsave').modal('show');

    //alert('visible');
});

/* Does not solve issue with scrollbars, see Edit note above
$(document).ready(function() {
    $("#employeekipsave").on('show.bs.modal', function() {
        $('body').addClass("modal-open");
    });
});
*/

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<a href="javascript:void(0);" data-toggle="modal" data-target="#myModal">Click Me</a>
<div class="modal" id="myModal">
  <div class="modal-dialog modal-large" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Employee KPI's</h4>
      </div>
      <div class="modal-body">
       	 Dummy Text Comes Here
      </div>
      <div class="modal-footer">
        <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
        <button type="button" class="btn btn-primary closeMyModal" data-dismiss="modal" >Save</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="employeekipsave">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body clearfix">
        <div class="col-lg-12 text-center success-popup">
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h5 class="text-success">Are you sure you want save Employee KPI's?</h5><button type="button" class="btn defaultBtn btn-sm  btn-defult" data-dismiss="modal" aria-label="Close">No</button><button type="button" class="btn btn-primary btn-sm defaultBtn" data-dismiss="modal" id="employeeKpiSuccess" style="margin-left:5px;" >Yes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

通过将属性data-toggle="modal" data-target="#employeekipsave"添加到保存按钮，可以在单击保存按钮后触发打开第二个模态。在这种情况下，您不需要任何其他JavaScript代码。

＆＃13;

＆＃13;

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<a href="javascript:void(0);" data-toggle="modal" data-target="#myModal">Click Me</a>
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-large" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Employee KPI's</h4>
            </div>
            <div class="modal-body">
       	        Dummy Text Comes Here
            </div>
            <div class="modal-footer">
                <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                <button type="button" class="btn btn-primary closeMyModal" data-dismiss="modal" data-toggle="modal" data-target="#employeekipsave">Save</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="employeekipsave">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body clearfix">
                <div class="col-lg-12 text-center success-popup">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h5 class="text-success">Are you sure you want save Employee KPI's?</h5><button type="button" class="btn defaultBtn btn-sm  btn-defult" data-dismiss="modal" aria-label="Close">No</button><button type="button" class="btn btn-primary btn-sm defaultBtn" data-dismiss="modal" id="employeeKpiSuccess" style="margin-left:5px;" >Yes</button>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

在您的解决方案解决方案中，通过单击x来显示模式，因为单击x时会触发hidden.bs.modal事件。

Answer 3

您可以简单地关闭当前模态，然后打开第二个模态。

实施例。

$(document).on('click','.closeMyModal',function(){
  $("#myModal").modal('hide');
  $('#employeekipsave').modal('show');
})