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

admin管理员组

文章数量:1332339

I have a $.post() request named "HasIncreasePoint" and if the data returned from server indicates a success (e.IsSuccess), I want not to open the bootstrap modal dialog, and acplish 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!");
            event.preventDefault();
            event.stopPropagation();
            $('a[data-toggle="modal"]').off("click");
        }else{
            // 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 show.bs.modal which is fires
            // immediately when, you guessed it, the show instance method
            // for the modal is called
            modal.on('show.bs.modal', function () {
                // use your remote content URL to load the modal body
                modalBody.load(remote_content);
            }).modal();

            // 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">
    <i></i><span>SignIn</span>
</a>

I have a $.post() request named "HasIncreasePoint" and if the data returned from server indicates a success (e.IsSuccess), I want not to open the bootstrap modal dialog, and acplish 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!");
            event.preventDefault();
            event.stopPropagation();
            $('a[data-toggle="modal"]').off("click");
        }else{
            // 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 show.bs.modal which is fires
            // immediately when, you guessed it, the show instance method
            // for the modal is called
            modal.on('show.bs.modal', function () {
                // use your remote content URL to load the modal body
                modalBody.load(remote_content);
            }).modal();

            // 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">
    <i></i><span>SignIn</span>
</a>

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow edited Sep 7, 2016 at 12:44 Artur Filipiak 9,15744 gold badges3232 silver badges5656 bronze badges asked Sep 6, 2016 at 12:25 MapleStoryMapleStory 66844 gold badges1111 silver badges2424 bronze badges 1

• First try with synchronous ajax call, the one you use is async (which means the click has already been triggered before you get your response data). – skobaljic Commented Sep 6, 2016 at 12:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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">
  <i></i><span>SignIn</span>
</a>

JS:

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

$('.btn-check-in').on('click', function(event){
  event.preventDefault();
  if(!waiting){
    var myModal = $(this).data('target');
    var remote_content = this.href;
    $.post('@Url.Action("HasIncreasePoint")').done(function(e){
      if(!e.IsSuccess){

        // 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('show.bs.modal', function(){
          $(this).find('.modal-body').load(remote_content);
        }).modal('show');

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

本文标签：