MapleStory MapleStory - 11 months ago 51
Javascript Question

How to set custom click event handler for data-toggle="modal" button without opening modal dialog?

I have a

request named "HasIncreasePoint" and if the data returned from server indicates a success (
), I want not to open the bootstrap modal dialog, and accomplish the click event process.

$('a[data-toggle="modal"]').on('click', function (event) {
$.post("@Url.Action("HasIncreasePoint")", function (e){
if (e.IsSuccess) {
alert("error!please not to open the modal!");
// From the clicked element, get the data-target arrtibute
// which BS3 uses to determine the target modal
var target_modal = $(e.currentTarget).data('target');
// also get the remote content's URL
var remote_content = e.currentTarget.href;

// Find the target modal in the DOM
var modal = $(target_modal);
// Find the modal's <div class="modal-body"> so we can populate it
var modalBody = $(target_modal + ' .modal-body');

// Capture BS3's which is fires
// immediately when, you guessed it, the show instance method
// for the modal is called
modal.on('', function () {
// use your remote content URL to load the modal body

// and show the modal

// Now return a false (negating the link action) to prevent Bootstrap's JS 3.1.1
// from throwing a 'preventDefault' error due to us overriding the anchor usage.
return false;

and the HTML code:

<a class="btn-check-in" href="@Url.Action("ReverseCard")" data-toggle="modal" data-target="#myModal" id="btn-sign">

Answer Source

You can remove data-toggle="modal" attribute and bind click on .btn-check-in class.
Then, whenever you need the modal, open it using javascript (as you already do)

<a class="btn-check-in" href='@Url.Action("ReverseCard")' data-target="#myModal" id="btn-sign">


// set a flag to prevent multiple requests:
var waiting = 0;

$('.btn-check-in').on('click', function(event){
    var myModal = $(this).data('target');
    var remote_content = this.href;

        // this part seems to be overdone, but I left it as is
        // as I don't know what is your reason of loading fresh content each time...
        $(myModal).on('', function(){

        // it was successful!
      waiting = 0;
  waiting = "I'm waiting for $.post()";