Close modal popup using jquery

Question

Below code is my popup view...and i want to close popup on clicking close button (X) which is on top of popup...at the bottom of view i have jquery to close the popup..but thats not working..i have popup on another popup..just like parent popup and child popup.and in this case i have to close child popup... Please help me out

<div class="modal-dialog" style="width:1056px" id="pop">
    <div class="modal-content">
       <div class="modal-header">            
            <input type="button" onclick="close()" id="button" value="Close [x]" />          

        </div>
        <div class="modal-body">
            <div class="scroller">
                <table class="display table table-striped table-bordered table-hover" id='tblTicket' cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Data</th>                            
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Data</td>                            
                        </tr>

                    </tbody>
                </table>


                <table class="display table table-striped table-bordered table-hover" id='tblTicket' cellspacing="0" width="100%">
                    <tr>
                        <th>DATA</th>                        
                    </tr>

                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                             data 
                            </td>                           
                        </tr>
                    }

                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" language="javascript">
$("#button").click(function () {        
    $("#pop").close
       });
</script>

Possible duplicate of [Close Bootstrap Modal](https://stackoverflow.com/questions/16493280/close-bootstrap-modal) — Curiousdev, May 31 '17 at 06:12

Laxman Gite · Answer 1 · 2017-05-31T10:21:30.603

Please check below code :

<script type="text/javascript" language="javascript">

    $("#button").click(function () { 
        $('#pop').modal('toggle');
        $('#pop').modal('hide');
        $('.modal-backdrop').removeClass('modal-backdrop');
        $('.fade').removeClass('fade');
        $('.in').removeClass('in');

        $('html, body').css({
            'overflow': 'auto',
            'height': 'auto'
        });

    });

</script>

Cheers !!

score 1 · Answer 2 · answered May 31 '17 at 05:36

1

Try this code:-

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

    $('#pop').modal('toggle');

});

answered May 31 '17 at 05:36

mayank

460
3
15

Your code is working...but thats working after clicking twice on it...bro problem is that i have two popups...so "modal" might be conflicting in this case – sachin singh May 31 '17 at 05:44
@sachinsingh can you create a snippet so that i can edit it :) – mayank Jun 01 '17 at 09:57
do you have same id on both pop up ? – mayank Jun 01 '17 at 09:58

score 0 · Answer 3 · answered May 31 '17 at 05:21

0

Try this

<script type="text/javascript" language="javascript">
$("#button").click(function () {        
    $('#pop').modal('hide');
       });
</script>

answered May 31 '17 at 05:21

Khetesh kumawat

681
7
15

score 0 · Answer 4 · answered Aug 07 '18 at 21:32

you can use something like this instead

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

or if you really want to toggle using jquery, you can do this (make sure they have unique IDs

$("#modal1").modal("toggle")

or

$("#modal1").modal("hide")

to just hide it

score 0 · Answer 5 · edited Jan 21 '20 at 18:39

0

You can simply add a data-dismiss modal to your #button:

$("#button").attr("data-dismiss", "modal");

edited Jan 21 '20 at 18:39

סטנלי גרונן

2,917
23
46
68

answered Jan 21 '20 at 18:10

Timi badass

1
2

score 0 · Answer 6 · answered Jun 21 '23 at 11:55

0

if you want to have a function in onclick than you have to write function.

function close(){
   $("#pop").modal("toggle");
 }

answered Jun 21 '23 at 11:55

Alireza Rezaei Mojaz

21
4

Close modal popup using jquery

6 Answers6