如何在按钮单击后关闭弹出窗口模式

-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

如何在按钮单击后关闭弹出窗口模式

回答

相关问题