How to close a modal box after form submit?
Tags: html,css,forms
Problem :
I am using the css modal box described by Paul R.Hayes here - http://www.paulrhayes.com/experiments/modal/
I have inserted a form into the modal box. The form target is in an iframe which is hidden on the same page. I want to close the modal window as soon as the form submits. But the form should be processed within the iframe (hidden).
How can I achieve this?
Solution :
It looks like the modal window is closed by any url linking to the #close html fragment.
Therefore adding the following code to the submit handler of your form should close the modal on submission.
<form ... onsubmit="window.location.assign('#close')">
CSS Howto..
A sample one using position and z-index for reference, as discussed in the comments. $(function () { $("a").click(function () { $(".modal").hide().removeClass("hidden").fadeIn(); $("body").css("overflow", "hidden"); return false; }); $(".modal").click(function () { $(this).fadeOut();...
You could rotate the arrow and place it according to top .bubble:after { border-color: #EEEEEE rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: solid; border-width: 26px; top: -52px; content:...
I don't have an IDE in front of me, but I believe I've done something like this in the past: writer.AddAttribute(HtmlTextWriterAttribute.Href, "/stdtheme.css"); writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/css"); writer.RenderBeginTag(HtmlTextWriterTag.Link); ...
You do it the same way you use CSS to control anything else: put it in a div, give it a class (or id), and format the parent object. Are...
I think your looking something like this... My Image One Two Three CSS contains... mymenu a { float: left; height: 30px; padding: 0 15px; color: #222; text-transform: uppercase; font: bold...
How are you generating the PDF, via a parameter in the querystring? Something like index.cfm?page=foo&format=pdf? If you aren't, you could easily add a parameter like that, then in your CFM:...
You're mixing up source availability and open source. Yes, every site must make their HTML and JavaScript available for download. However, open source is much more than that. It requires...
Isotope is cool, but there were some conflicts with Foundation CSS framework. Then I found Packery. It just works. http://packery.metafizzy.co...
Two suggestions: You're essentially asking for a table-based layout, so you may as well use an HTML table. Each of your cells has a fixed width, and your PHP code...
Yup you'd be better off doing something like this: var set = { up: function() {$('.up').css('background-color', _config.upColor)}, down : function() {$('.down').css('background-color', _config.downColor)} }; if (true) { set.up(); } ...
UPDATED Even better - use the <ul> as the identifier and go that route: <ul id="mainMenu"> <li id="mainSuit"><a onclick="mainSuit()" href="javascript: void(0)">Suit</a></li> </ul> <ul id="suitMenu"> <li id="suitLoadout"><a>Loadout</a></li> <li...
You can do something like this - <div class="flip">Click to slide the panel down or up</div> <div class="panel">Hello world!</div> some more flip's- <div class="flip">Click to slide the panel down or...
My approach is to use borders for a triangular mask, and underneath use a background gradient. Check out my code on codepen The updated version. For pseudo elements (:before and...
You need to add position:relative to .container-fluid
#mydiv a { color:white; } ...
If you need to select all the <li> tags, use this: li {... css rules ...} If you need to select all the <li> tags inside the <ul class="about-child">, use...
Thought of another, simpler way of doing this, when addressing another question... Just override the col-md-* padding by adding a custom class. No media query required. Example: http://www.bootply.com/utGXpeBgE2 HTML <div...
input:focus { property to apply } for a live example check out the followng fiddle: http://jsfiddle.net/L5xvJ/ input:focus { border: 1px solid #0af; outline: none; -moz-box-shadow: 0px 0px 15px rgba(0, 170,...
This will do it. It uses calc (http://jsfiddle.net/vn84nm30/6/) .right { width: calc(100% - 250px); background-color: #F00; height: 200px; float: left; } ...
You can add additional selector with comma (,) as specified in W3C selectors grouping .foo .bar, .foobar { background: red; } this would work in both <div class="foo"> <div class="bar">I...
Add some styles to .menu ul .menu ul { list-style: none; font-family: 'Source Sans Pro', sans-serif; font-size:17px; font-weight:bold; /* add this */ position: fixed; top: 0; right: 0; } ...
This behavior is actually correct. Any background which is attachment: fixed will be relative to the viewport, not the element it is applied to. This is actually the basis of...
html code... <div class="rate"> <div class="rate-item">☆</div> <div class="rate-item">☆</div> <div class="rate-item">☆</div> </div> css code... .rate{ color:black; cursor:pointer; } .rate:hover{ color:red; } .rate-item{ float:left; cursor:pointer; margin:0px 15px 0px...
If I understood correctly, I would change the HTML to something like this: <div id="shop"> <div class="content"> <img src="http://placehold.it/182x121"/> <a href="#">Counter-Strike 1.6 Steam</a> </div> </div> Then I would be able...
Also commented this. You probably have floating elements that cause the problem. You can fix it by using overflow: auto. By using that, the container recognizes that there are elements...
I've created a fiddle and can't see the problem. http://jsfiddle.net/jasongennaro/V654e/ However, we can't see your list-style because they are images. So the problem may be there, specifically with the :hover...
another user had this same question with a very good answer. The FULL sample code that came from that answer is provided here: http://jsfiddle.net/Bq6eK/13/ but the crux of what you...
My JS/Jquery based modification: http://jsfiddle.net/pTKd2/3/
You can do something like this: .flex { display: flex; flex-direction: row; flex-wrap: wrap; } .flex > div { flex: 1 0 50%; } .flex > div:first-child { flex: 0...
try this: button:hover { width: 200px; } ...