Modal display when submitting a form

Asked

Viewed 786 times

6

How do I display a modal when I submit a registration form? The content of this modal will be just a message. Here’s the thing, on this form, you send a file and some information. As it usually takes a few seconds to upload, I would like to launch a modal with a "Wait" message, so that the user does not change page while uploading. At present, there is no information being displayed.

javascript jquery asp.net-mvc asp.net asp.net-mvc-5

  • There are already questions on the site that solve this problem. Have you looked for them? found one that would help you or similar?

  • Give me an example, because I couldn’t find :( @Sergio

  • 3

    For example: http://answall.com/q/25147/129

  • 1

    @Zackmorgan Please check that my answer to that other question => http://answall.com/a/76811/298 resolves your problem.

  • @Leomardesouza, if using ajax, follow this answer link, where it indicates to use the beforeSend

  • Do you need to be a modal? Can’t be a Pover?

Show 1 more comment

2 answers

1

If you are using jquery you can use:

$("form").submit(function(e){
        //Ação para abrir o modal
});

Once clicked on the button it will display the modal and as soon as it is done the post the page will be updated to the form action.

0

I believe you want to use one Gif de loading. Well, you can use in Jquery (Ajax), as the example below:

//Este código fica após o Success e Error do Ajax
beforeSend: function () {
  $('.loader').css({ display: "block" });
},
  complete: function () {
  $('.loader').css({ display: "none" });
}
/*estilos para gif de loading*/
.loader {
    display: none;
}

.loader.show {
    display: block;
    position: fixed;
    z-index: 100;
    background-color: rgba(0, 0, 0, 1);
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    }

.loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
}

#overlay {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.64);
    opacity: 0.8;
    filter: alpha(opacity=80);
}
<div class="loader" id="overlay">
  <img src="~/Images/loading-image.gif" id="loading" class="loading" alt="loading" title="Aguarde..." />
</div>

Browser other questions tagged javascript jquery asp.net-mvc asp.net asp.net-mvc-5

You are not signed in. Login or sign up in order to post.