javascript - How can I stop my modal dialog from closing on button click? - Stack Overflow

admin管理员组

文章数量:1395020

I have this button in a bootstrap modal dialog:

<button id="btnSelectAll" style="float:left">Select All</button>

The click event looks like this, all it is supposed to do is mark a bunch of checkboxes as checked.

$(document).on('click', '#btnSelectAll', function ()
{
    var $modal = $('#MyPanel');
    $modal.find('#aCheckBox').prop('checked', true);

});

Here is the markup for the modal itself (with specifics removed as it's a bit long and basically just a bunch of checkboxes with a few buttons at the end):

   <asp:Panel class="modal" ID="MyPanel" runat="server">
        <div class="modal-dialog modal-lg" style="width:30%">
            <div class="modal-content">
                <div class="modal-header">
                    <asp:Label ID="Header" runat="server" Text="Header" />
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td style="width: 20px;" />
                            <td>
                                <asp:Label ID="Label" runat="server" Text="Stuff:" />
                            </td>
                           <tr>
                    </table>
               </div>
          </div>
     </div>
</asp:Panel>

The click event code is being hit as I see it in the debugger, but the modal dialog always closes immediately when I click the button. I can't seem to find anything online to explain why, Googling just gives me a bunch of "how do I close a modal on button click" type questions. I want to know how to not close it.

I have this button in a bootstrap modal dialog:

<button id="btnSelectAll" style="float:left">Select All</button>

The click event looks like this, all it is supposed to do is mark a bunch of checkboxes as checked.

$(document).on('click', '#btnSelectAll', function ()
{
    var $modal = $('#MyPanel');
    $modal.find('#aCheckBox').prop('checked', true);

});

Here is the markup for the modal itself (with specifics removed as it's a bit long and basically just a bunch of checkboxes with a few buttons at the end):

   <asp:Panel class="modal" ID="MyPanel" runat="server">
        <div class="modal-dialog modal-lg" style="width:30%">
            <div class="modal-content">
                <div class="modal-header">
                    <asp:Label ID="Header" runat="server" Text="Header" />
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td style="width: 20px;" />
                            <td>
                                <asp:Label ID="Label" runat="server" Text="Stuff:" />
                            </td>
                           <tr>
                    </table>
               </div>
          </div>
     </div>
</asp:Panel>

The click event code is being hit as I see it in the debugger, but the modal dialog always closes immediately when I click the button. I can't seem to find anything online to explain why, Googling just gives me a bunch of "how do I close a modal on button click" type questions. I want to know how to not close it.

• javascript
• jquery
• asp
• twitter-bootstrap
• modal-dialog

Share Improve this question Follow edited Nov 19, 2014 at 14:37 eddie_cat asked Nov 19, 2014 at 14:28 eddie_cateddie_cat 2,59344 gold badges2828 silver badges4545 bronze badges 11

• Can you also provide the markup for your modal? Any relevant JS for it would be useful, too. – MattD Commented Nov 19, 2014 at 14:31
• Did you try using e.preventDefault(); ? – Wilfredo P Commented Nov 19, 2014 at 14:33
• Made a quick modal with a button and checkboxes in the modal body, click the button and it checks all the boxes. Doesn't close. jsfiddle/wmbs3znt – MattD Commented Nov 19, 2014 at 14:42
• So this is supposed to check a bunch of checkboxes? Please tell me you didn't give a bunch of page elements the same ID, because $modal.find('#aCheckBox').prop('checked', true); shouldn't be how you're finding several items to do something to them.... – MattD Commented Nov 19, 2014 at 14:44
• @MattD thanks, I had to use preventDefault not sure why since everything else about my code matches yours (now... I didn't think to just check all the checkboxes at once and had a very long list lol) so thanks for making my code cleaner :D – eddie_cat Commented Nov 19, 2014 at 14:46

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 6

You could just try e.preventDefault. From the jQuery documentation we have this

Description: If this method is called, the default action of the event will not be triggered.

So, if you change your code to the following:

$(document).on('click', '#btnSelectAll', function (event)
{
    event.preventDefault();
    var $modal = $('#MyPanel');
    $modal.find('#aCheckBox').prop('checked', true);
});

your problem will be solved.

本文标签： javascriptHow can I stop my modal dialog from closing on button clickStack Overflow