What is the best way to automatically close a modal window after pressing the submit button

Having some trouble with my modal window using pure CSS. Can't seem to get it to disappear after clicking the submit button. Any suggestions on how to hide it properly? Here is the code snippet of both the HTML and CSS for reference. Open to all ideas!

<div class="banner-content text-center">
                            <br/><br>
                            <a href="#open-modal" class="myButton">ORDER</a>    

                            <div id="open-modal" class="modal-window" id="modal-window">
                             <div>
                                <a href="#modal-close" title="Close" class="modal-close">Close</a>
                                <h1>Contact Form</h1>
                                <div>
                                    <div class="container">
                                          <form name="contactform" method="post">

                                            <input type="text" id="fname" name="first_name" >
                                            <input type="text" id="lname" name="email">
                                            <input type="text" id="phone" name="phone" >
                                            <textarea id="subject" name="subject" style="height:150px"></textarea>
                                            <input type="submit" name="submit" id="submit" value="Send">

                                          </form>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
htmlcss

Answer №1

To implement Bootstrap, you can try the following code snippet:

$('#submit').submit(function(e) {
        e.preventDefault();
        $('#IDModal').modal('hide');
        return false;
    });

Additionally, please ensure to include a button type in your HTML. I suggest changing 

<input type="submit" name="submit" id="submit" value="Send">
to < 
<button type="submit" name="submit" id="submit" value="Send">
.

Share your feedback with me once you have tested it!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JQuery, identify cells located in the first column of a table excluding those in the header section

In the past, I had code that looked like this: $(elem).parents('li').find(...) I used this code when elem was an item in a list, making it easy to reference all items in the list. But now, I've made some changes and decided to use a table ...

javascriptjqueryhtmljquery-uijquery-selectors

What could be causing the issue with ng-include not functioning properly?

Issue with ng-include Organized Directory Structure : ssh_project --public ----templates ------header.html ------footer.html ----views ------index.html Here is the content of my index.html file <body> <h1>Hello</h1> <div ng ...

javascripthtmlangularjs

Using CSS nth-child to create a two-column checkers layout

I have formulated a form on my website that divides into two columns by using floats. I am interested in creating a "checkered" effect for these columns. Can anyone guide me on how to utilize nth-child to achieve this design layout? For reference, please c ...

css

Display a different string from an array at random, revealing each one gradually with a time delay

Looking for a way to display strings randomly without replacing one with another? I need a script that can shuffle words in a list and present them in a random order, with the ability to adjust the delay between each word. If you have a more effective code ...

javascripthtmljquery

Design a modern slider with a button that triggers a pop-up modal window

Recently Updated I am working on a testimonial slider using slick slider, and I want to incorporate a modal within each slide. In my custom post type 'Testimonials' (also known as 'getuigenissen' in English), I have various Advanced C ...

phpjquerycsswordpressslick.js

What is the best way to ensure the right six-column DIV remains at the top in responsive web design?

I have implemented a custom 12-column grid and have created a row structure as follows: <div class="row"> <div id="the-pink" class="lg-6 md-12 sm-12"><!-- content --></div> <div id="the-violet" class="lg-6 md-12 sm-12"&g ...

csssass

What is the best way to perform calculations within a PHP loop for <input> elements and then display the results using a JavaScript loop?

Hello everyone, I'm currently struggling with displaying the calculations from a loop of input tags. What I'm trying to achieve is having 5 rows with input fields. At the end of each row, there should be a span area that displays the calculation ...

javascriptphpjqueryajaxhtml

Aligment issues in columns on Bootstrap 5

I currently have a layout using Bootstrap 5 with multiple rows and columns. My goal is to have the columns aligned within each row, but I am experiencing issues where some borders are not lining up correctly with the columns. .VI-border { border-t ...

htmlcssbootstrap-5

The resizing issue of Textarea during transitions

Whenever I add the transition property to a textarea, it automatically affects the resizing function of the textarea. Is it possible to disable the transition only when resizing the textarea, but not for the textarea itself? <textarea name="" id="" cla ...

javascriptjqueryhtmlcss

Node Express app issue: Only one page is not having CSS applied

I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...

cssnode.jsexpresshandlebars.js

The CSS outline has a soft, rounded appearance rather than a sharp

Is there a way to prevent my outline from having rounded corners as it expands during the animation? Note: The issue seems to be present on Linux and MS Edge, but works fine on Mozilla Firefox. Any solutions for MS Edge users? Check out the code on Codep ...

cssoutline

Switch the default blue color of Ngx-Pagination to a different color option

I am currently using the ngx-pagination plugin in my Angular 16 project and I would like to change the default blue color to a different one, is there anyone who can assist me with this? This is the HTML code snippet: <div> <pagination-controls ...

cssangularngx-pagination

Troubleshooting a text alignment problem with form-group in the Bootstrap framework

Currently, I am in the process of building a form that consists of several form-group elements. My main issue arises when dealing with long text as it causes alignment problems. Could you kindly take a look at the problem through this link: http://jsfidd ...

csstwitter-bootstrap

"Effortlessly add an image to your page and watch it appear instantly without the need

One of the features on my website is a button that enables users to select an image, as shown in the code snippet below: <div id="fileUpload"> <form id="joinPhotoUploadForm" method="POST" enctype="multipart/form-data"> ...

phpjqueryhtml

The data-ng-bind directive cannot be used with the <option> tag

Currently, I am in the process of learning angular and encountered a problem that has me stuck. Upon researching on AngularJS : Why ng-bind is better than {{}} in angular?, I found out that both {{}} and ng-bind are said to produce the same result. However ...

javascripthtmlangularjsng-bind

How to create a vertically scrollable div within another div by utilizing scrollTop in jQuery

I need assistance with scrolling the #container div inside the .bloc_1_medias div. The height of #container is greater than that of .bloc_1_medias. My goal is to implement a function where clicking on the "next" and "previous" text will scroll the #contai ...

javascriptjqueryhtmlscrollbarscrolltop

What is the best way to replicate tags in selenium when an element has multiple class names?

Extracting information from a webpage where a significant amount of text was concealed behind the "see more" tab. Using selenium to click on all such buttons and then extracting data with beautifulsoup. However, some of these buttons have additional space ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Extract the text without the HTML tags

I am facing a challenge where I need to extract a specific UL element from an HTML page that has the class cbs-list, while keeping all other elements within the LI tags intact. The structure of the HTML is as follows: <ul class="cbs-list"> <li> ...

jqueryhtmlsharepoint

unable to clear form fields after ajax submission issue persisting

After submitting via ajax, I am having trouble clearing form fields. Any help in checking my code and providing suggestions would be greatly appreciated. Here is the code snippet: jQuery(document).on('click', '.um-message-send:not(.disabled ...

javascriptjqueryhtmlajax

CSS styling for a container element that enables word wrapping on child divs, while also being able to stretch to accommodate the width of its children

Is it feasible to create CSS that allows an element to support word-wrap:break-word, while also adjusting its width to fit the content when breaking is not possible? <html> <style> .outer { background-color:red; word-wrap:break-wor ...

csswebkitword-break