How to close popup modal after button click

Question

How to close popup modal after the checkbox is checked and then the button is clicked?

If checkbox is not checked then not to close modal. Checkbox and button placed inside modal. When I checking the checkbox and clicking the button modal is not closing.

$(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>

Share the full code please. – Saurav Rastogi Oct 21 '17 at 06:41 — Saurav Rastogi, Oct 21 '17 at 06:41
Please don't spam tags, this has no relation to `php` – NewToJS Oct 21 '17 at 06:50 — NewToJS, Oct 21 '17 at 06:50
soory mistake plzz solve this problem – xhander meck Oct 21 '17 at 07:07 — xhander meck, Oct 21 '17 at 07:07

Nimesh Vagadiya · Accepted Answer · 2017-10-21T08:34:06.093

<!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>

$(document).ready(function(){ $('.one:checked').on('click' , '.close_model' , function(){ $('#myModal').modal().hide(); }); }) — xhander meck, Oct 21 '17 at 07:21

score 1 · Answer 2 · answered Oct 21 '17 at 14:02

change close button code like this

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

and then add this JQuery code

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

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

})

here you go working sample

score 0 · Answer 3 · answered Oct 21 '17 at 08:36

Hi there create a function and ad the function to button click event.

<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');
}
}

score 0 · Answer 4 · answered Jun 10 '20 at 01:42

        $("#selectItem").click(function(){

        var value = $("input[type='radio']:checked").val();

        $('#town').val(value);
        $("#myModal").modal('hide'); 
    });

<button type="button" id="selectItem" name="selectItem" class="btn btn-primary">Select</button>

The above code worked for me

How to close popup modal after button click

4 Answers4

Linked