需要JQuery帮助修复模式弹出

on click me我需要一个与save按钮弹出。在save按钮
单击我需要另一个确认弹出主弹出关闭

后，我得到的是什么？

我能够获得1步骤和保存点击我得到确认弹出。问题是当我点击x图标，那么我也得到确认弹出窗口。我需要确认弹出只保存按钮。不要点击x图标。

有线情况？

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

$(document).on('click','.closeMyModal',function(){ 
 
    $("#myModal").on('hidden.bs.modal', function(){ 
 
    //alert('Hidden'); 
 
    $('#employeekipsave').modal('show'); 
 
    //alert('visible'); 
 
    }); 
 
})

<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"> 
 
     \t 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>

来源

2016-10-04 Charantej Golla

$("#myModal").on('hidden.bs.modal', function(){ });注册一个事件侦听器每当模式被隐藏的事，跑，你会发现，你只得到了奇怪的行为，如果你已经点击保存按钮，因为它然后注册此事件侦听器。删除它，它会100％。

添加事件侦听器，用于何时将显示第二个模式将类modal-open添加到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"> 
 
     \t 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>

来源

2016-10-04 06:55:26

这应该工作正常 – Raki

谢谢海因里希。这里是测试网址。当我通过相同的过程时，它将向衬衫添加衬垫。请仔细阅读网址。 http://saviance-fraud.com/modal-popup.html。 –

在浏览器没有滚动的情况下，它工作正常。如果浏览器已经滚动，那么它不起作用。这就是我尝试隐藏bs模式事件的原因 –

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

<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"> 
 
     \t   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>

在您的解决方案的解决方案的模式出现了通过点击X因为X点击时hidden.bs.modal事件。

来源

2016-10-04 06:49:33

感谢您的快速反应托马斯。但是我点击按钮时会调用'hidden.bs.modal'。不在x标记。 –

是的，但是你在隐藏事件上注册了一个处理函数，它调用$（'＃employeekipsave'）.modal（'show'），所以每次隐藏第一个模态（#myModal）时显示第二个模态（#employeekipsave）。单击按钮时发生的事情不是打开第二个模式的函数的调用，而是第一个隐藏的事件注册以显示第二个模式。 –

托马斯，当浏览器没有滚动时，你的想法工作正常。请通过以下网址。你会明白我在说什么。 http://saviance-fraud.com/modal-popup.html –

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

例子。

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

来源

2016-10-04 06:49:57

我试过这个Dimal。这是导致填充问题。每次我点击保存按钮，它都会向浏览器添加padding-right：17px。 –

需要JQuery帮助修复模式弹出

回答

相关问题