需要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幫助修復模式彈出

回答

相關問題