Closing of modal box (with form inside)

HTML & CSS
1

I have form that will show up in pop up modal box. This form is submitted via AJAX call. I would like to close this box after submit without user having to click on the X at top corner.
Is there a way to to this?

2

You would intercept the submit function with JS and perform your modal close and then submit the form as usual.

How you close the modal depends on how you have opened it and it may be as simple as removing a class.

We’d need to see an example of the code to offer further advice but the answer will involve js.

3

I opened it by clicking on the menu

4

That sounds like magic:)

What I can deduce from your post so far is that you have this:

<nav><a href="#">Menu</a></nav>

When you click that word a modal opens with a form inside.

That is not a default browser function so must be pure magic:)

2 Likes
5

In case that last post came across as a bit facetious let me elaborate:) :slight_smile:

What system are you using to open the modal?

Is this a js function you have implemented or is it a bootstrap function or some other plug in function that you have bought/borrowed or written?

Or perhaps this was a css modal so did you use the checkbox hack to open it or perhaps utilised the :target selector to open it.

Once the modal is opened how is the modal closed? Is it a js function or another checbox/:target method via css only.

How is the form submitted it? Is it already handled by js because you would need to tap into that existing JS routine most likely. If its a standard browser submit then you would need to set up your own js routine to intercept and act accordingly.

All of this is specific to your ‘use-case’ so without knowledge of all the above there can be no easy answer I’m afraid.

6

lol…I used this tutorial to do it Modal

I think I might use jQuery.hide(); function

7

That won’t help because the modal is opened with css and if you hide it it might be hard to open it again without more scripting.

You’ll need to do something like this (based on the html from that modal site you linked to):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Creating a modal box with HTML5 and CSS3</title>
<style>
.modalDialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-family: Arial;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}
.modalDialog > div {
	width: 600px;
	height: 450px;
	padding: .5em;
	box-sizing: border-box;
	background: #999;
	color: #eee;
	border-radius: .7em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.modalDialog > div>img {
	width: 550px;
}
.close {
	background: #606061;
	color: #eee;
	line-height: 25px;
	position: absolute;
	right: 15px;
	top: 15px;
	text-align: center;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 6px;/*box-shadow: 1px 1px 3px #000;*/
}
.close:hover {
	background: #00d9ff;
}
</style>
</head>

<body >
<a href="#openModal1"> <img src="images/css3.jpg" height="70px"  /> </a>
<div id="openModal1" class="modalDialog">
  <div> <a href="#other" title="Close" class="close">X</a>
    <h3>Learn CSS3</h3>
    <img src="images/css3.jpg" />
    <p>Learn Web Skill</p>
    <form>
      <label for="test">Hello</label>
      <input type="text" name="test" id="test">
      <input class="closeSubmit" type="submit" name="submit" id="submit" value="Submit">
    </form>
  </div>
</div>
<a href="#openModal2"> <img src="images/javascript.jpg" height="70px" /> </a>
<div id="openModal2" class="modalDialog">
  <div> <a href="#other" title="Close" class="close">X</a>
    <h3>Learn JavaScript</h3>
    <img src="images/javascript.jpg" />
    <p>Learn Web Skill</p>
  </div>
</div>
<a href="#openModal3"> <img src="images/php.png" height="70px" /> </a>
<div id="openModal3" class="modalDialog">
  <div> <a href="#other" title="Close" class="close">X</a>
    <h3>Learn PHP</h3>
    <img src="images/php.png" />
    <p>Learn Web Skill</p>
  </div>
</div>
<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script> 
<script>
$( ".closeSubmit" ).click(function(e) {
  var linkClose = $(this).closest('.modalDialog').find('.close');
  window.location = linkClose.attr('href');  
});
</script>
</body>
</html>
1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.