CODEWITHSUNDEEP
javascriptjqueryasp.netbuttonmodal-dialog
FBEvo1
FBEvo1

Reputation: 61

Why does my Jquery Modals close with any button on my modal?

My Jquery Modal works perfectly however, when i click a button which is not supposed to close the modal it closes the modal? Can it be that the button is refreshing the page automatically causing the modal to close? How can i overcome this current problem?

This Is the Script:

 <script>

$(document).ready(function () {
    var triggers = $(".modalInput").overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#F7F7F7',
            loadSpeed: 200,
            opacity: 0.9
        },

        closeOnClick: false
    });

    var buttons = $("#yesno button").click(function (e) {

        // get user input
        var yes = buttons.index(this) === 0;

        // do something with the answer
        triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
    });

});

 </script>

And this is the Button (Trigger ):

    <asp:Button class="modalInput" rel="#yesno" ID="modalInput" runat="server" BackColor="#525663" BorderColor="#999999"
               BorderStyle="Solid" BorderWidth="1pt" CommandName="MoveNext" Font-Size="Large"
               ForeColor="White" Style="font-family: Segoe UI; margin-left: 0px; position: relative;
               top: 25px; left: -25px; width: 152px; height: 41px;" Text="Edit Information"  />

This is the Modal:

  <div class="modal" id="yesno">  
 <h2>Edit Account Information:</h2>  

   <Uc2:EditCurrentSet ID="EditCurrentSet" runat="server" />

    <a class="close"></a> 

        </p></div>

*Am i putting the return false; in the correct place?: If i am there is still no change in results! * 

   <script>


$(document).ready(function () {
    var triggers = $(".modalInput").overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#F7F7F7',
            loadSpeed: 200,
            opacity: 0.9
        },

        closeOnClick: false

    });

    var buttons = $("#yesno button").click(function (e) {

        // get user input
        var yes = buttons.index(this) === 0;

        // do something with the answer
        triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
        return false;
    });

    return false;
});
  </script>

Upvotes: 0

Views: 171

Answers (2)

ajbeaven
ajbeaven

Reputation: 9562

If you've changed your event handler to return false and it's still not working, then you're not selecting the right button. I think your selector should look like this:

var buttons = $("#modalInput").click(function (e) {
    // get user input
    var yes = buttons.index(this) === 0;

    // do something with the answer
    triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
    return false;
});

The # in the selector there means you're trying to find the button by ID - you can look at the rendered HTML for that button (view source/web developer tools in your favourite browser) and check the ID yourself. You've complicated it a bit by adding a rel attribute to the button, but I wouldn't have thought that selector would have worked anyway.

Upvotes: 1

Gromer
Gromer

Reputation: 9931

Yeah, your return false; is in the wrong place. Instead of return false;, use the event's preventDefault function:

var buttons = $("#yesno button").click(function (e) {
    e.preventDefault();

    // get user input
    var yes = buttons.index(this) === 0;

    // do something with the answer
    triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
    return false;
});

That button is submitting as is the nature of webforms. Using preventDefault (or return false; if you want), will stop it from posting to the server, which is the default action for an asp:Button.

Upvotes: 2

Related Questions