如何在按鈕單擊後關閉彈出窗口模式

-1

如何在複選框被選中並點擊按鈕後關閉彈出窗口模式？如何在按鈕單擊後關閉彈出窗口模式

如果未勾選複選框，則不關閉模態。複選框和按鈕放置在模態內。當我檢查複選框並單擊按鈕模式不關閉。

$(document).ready(function(){ 
 

 
$('.one:checked').on('click' , '.close_model' , function(){ 
 

 
dialog('close'); 
 

 
}); 
 
    
 

 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <button type="button" class="close_model btn btn-danger">button</button> 
 

 
      <input type="checkbox" name="ch" class="one"> 
 
      <input type="checkbox" name="ch" class="one"> 
 
      <input type="checkbox" name="ch" class="one"> 
 
      <input type="checkbox" name="ch" class="one"> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

來源

2017-10-21 xhander meck

分享的完整代碼請。 –

請不要垃圾郵件標籤，這與'php' – NewToJS

soory錯誤plzz解決這個問題沒有關係 –

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
      <title>Bootstrap Example</title> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
      <div class="container"> 
       <h2>Modal Example</h2> 
       <!-- Trigger the modal with a button --> 
       <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
       <!-- Modal --> 
       <div class="modal fade" id="myModal" role="dialog"> 
         <div class="modal-dialog"> 
          <!-- Modal content--> 
          <div class="modal-content"> 
            <div class="modal-header"> 
             <button type="button" class="close" data-dismiss="modal">&times;</button> 
             <h4 class="modal-title">Modal Header</h4> 
            </div> 
            <div class="modal-body"> 
             <input type="hidden" name="txt1" id="textbox1"> 
             <button type="button" class="close_model btn btn-danger">button</button> 
             <input type="checkbox" name="ch" class="one" value="1"> 
             <input type="checkbox" name="ch" class="one" value="2"> 
             <input type="checkbox" name="ch" class="one" value="3"> 
             <input type="checkbox" name="ch" class="one" value="4"> 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
            </div> 
          </div> 
         </div> 
       </div> 
      </div> 
      <script type="text/javascript"> 
       $(document).ready(function(){ 
       $(".close_model").on("click",function(){ 
       if($('#textbox1').val() == 'true'){ 
        $('.close').trigger('click'); 
       }else{ 
        alert('pls click on checkbox'); 
       } 
       }); 
       $('.one').change(function() { 
          if(this.checked) { 
            $(this).prop("checked", 'true'); 
          } 
          $('#textbox1').val(this.checked); 
        }); 
       }); 
      </script> 
    </body> 
</html>

來源

2017-10-21 07:14:26

它的不隱藏模型 –

$（document）.ready（function（）{ $（'。one：checked' ）。在（ '點擊'， '.close_model'，函數（）{。 $（ '＃myModal'）模態（）隱藏（）; }）; }） –

我試試這個代碼 –

您好創建一個功能和廣告的功能按鈕單擊事件。這樣

<button type="button" class="btn btn-default close">Close</button>

然後

<button type="button" class="close_model btn btn-danger" onclick="CheckChecked();">button</button> 

Function CheckChecked() 
{ 
var x = document.getElementById("ch").checked; 
    if (x) 
{ 
$('#myModal').modal('hide'); 
} 
}

來源

2017-10-21 08:36:00 Shrikant

改變關閉按鈕的代碼添加該jQuery代碼

$('.close').click(function(){ 

if ($('.one').is(':checked')) 
{ 
$("#myModal").modal('toggle'); 
}

}）

在這裏你去working sample

來源

2017-10-21 14:02:22 Saif

如何在按鈕單擊後關閉彈出窗口模式

回答

相關問題