Custom modal - how to stop a save buttons default behavior so the custom modal can do its thing first?

问题

Av Asp.Net MVC web app.

I am using the Window.confirm() method to display the modal dialog when a save button is clicked. It works fine - the modal appears and waits for a response before executing the controller code.

However, I want a better looking modal.

How do I get it to block the controller code execution and 1st wait for my modal to respond? I'm told the modal is not a true modal and that I need a handler in there. Just not sure how or where to code that.

The Razor view (simplified - not showing fields):

@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile", FormMethod.Post))
{
    <div class="panel-body">
        <div class="row">
            <div class="col-md-3">
              .....
            </div>
        </div>
    </div>

<div class="panel-body">
    <div class="row">
        <div class="form-group">
            <div class="col-md-2">
                <input type="submit" value="Save" class="btn btn-primary saveButton"; />
            </div>
            <div class="col-md-2">
                @Html.ActionLink("Cancel Changes", "GetUserProfile", "UserProfile", null, new { @class = "btn btn-info" })
            </div>
        </div>
    </div>
 </div>

  @Html.AntiForgeryToken()
}

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

@* Modal. *@
<div class="modal fade" id="myModal4" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body" style="padding:10px;">
            <h4 class="text-center">Are you sure you want to save. Continue ?</h4>
            <div class="text-center">
                <a class="btn btn-info btn-yes4">Yes</a>
                <a class="btn btn-default btn-no4">No</a>
            </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function () {
    $(".saveButton").click(function (e) {
        // Trigger(show) the modal.
        $("#myModal4").modal({
            backdrop: 'static',
            keyboard: false
        });

        // Pass true in the callback function.
        $(".btn-yes4").click(function () {
            $("#myModal4").modal("hide");
            return true;
        });

        // Pass false in the callback function.
        $(".btn-no4").click(function () {
            $("#myModal4").modal("hide");
            return false;
        });

        // Remove the modal once it is closed.
        $("#myModal4").on('hidden.bs.modal', function () {
            $("#myModal4").remove();
        });
    });

    // The standard Window.confirm() method. It works - blocks the controller code execution and waits 
    // for a response. But it is ugly.

    //$('.saveButton').click(function (e) {
    //    if (confirm("Are you sure you want to save. Continue ?")) {
    //        return true;
    //    }

    //    return false;
    //});
});
</script>

回答1:

You are almost done!

Give your form an unique Id

submit it on yes button click event.

continue to return false in the submit button.

     @using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile",
     FormMethod.Post, new{id="uniqueId"}))
     {

And

   $(".btn-yes4").click(function () {
        $("#myModal4").modal("hide");
         jQuery("#uniqueId").submit();
        // return true;
    });

And finally

    return false;
    });

Complete code

The Razor view (simplified - not showing fields):

 @using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile", 
     FormMethod.Post, new{id="uniqueId"}))
    {
       <div class="panel-body">
           <div class="row">
              <div class="col-md-3">
               .....
             </div>
         </div>
     </div>

  <div class="panel-body">
     <div class="row">
         <div class="form-group">
              <div class="col-md-2">
            <input type="submit" value="Save" 
             class="btn btn-primary saveButton"; />
             </div>
        <div class="col-md-2">
            @Html.ActionLink("Cancel Changes", "GetUserProfile", 
               "UserProfile", null, new { @class = "btn btn-info" })
               </div>
           </div>
       </div>
   </div>

       @Html.AntiForgeryToken()
    }

   @Scripts.Render("~/bundles/jqueryval")
   @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Styles.Render("~/Content/css")

@* Modal. *@

   <div class="modal fade" id="myModal4" role="dialog">
       <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body" style="padding:10px;">
                <h4 class="text-center">Are you sure you want to save. Continue ?</h4>
                <div class="text-center">
                   <a class="btn btn-info btn-yes4">Yes</a>
                  <a class="btn btn-default btn-no4">No</a>
                </div>
           </div>
       </div>
    </div>
    </div>

     <script type="text/javascript">
         $(document).ready(function () {
         $(".saveButton").click(function (e) {
              // Trigger(show) the modal.
             $("#myModal4").modal({
                  backdrop: 'static',
                keyboard: false
           });

    // Pass true in the callback function.
    $(".btn-yes4").click(function () {
        $("#myModal4").modal("hide");
        //return true;
          jQuery("#uniqueId").submit();
    });

    // Pass false in the callback function.
    $(".btn-no4").click(function () {
        $("#myModal4").modal("hide");
        //return false;

    });

    // Remove the modal once it is closed.
    $("#myModal4").on('hidden.bs.modal', function () {
        $("#myModal4").remove();
    });
     return false;
});
 </script>

EDITS:

In order not to bind event click everytime, you can also use this code

     <script type="text/javascript">
         $(document).ready(function () {
         var $modal = $("#myModal4").modal({
                  backdrop: 'static',
                keyboard: false
           });
    // Pass true in the callback function.
    $(".btn-yes4").click(function () {
        $("#myModal4").modal("hide");
        //return true;
          jQuery("#uniqueId").submit();
    });

    // Pass false in the callback function.
    $(".btn-no4").click(function () {
        $("#myModal4").modal("hide");
        //return false;            
    });

     $(".saveButton").click(function (e) {
              // Trigger(show) the modal.
              $modal.model('show');

     return false;
    });
    </script>

来源：https://stackoverflow.com/questions/60920573/custom-modal-how-to-stop-a-save-buttons-default-behavior-so-the-custom-modal-c