Pop up modal with only html and CSS3
index.html
[code language=”html”]
<!DOCTYPE html>
<html>
<head>
<link rel=’stylesheet’ type=’text/css’ href=’modal.css’/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="confirm.js"></script>
</head>
<body>
<a href="#css-only-modal">Open CSS3 Modal</a>
<div id="css-only-modal">
<div>
<a href="#close" title="Close" id="close">X</a>
<h2>CSS Only Modal Box</h2>
<p>This is modal box is created solely on css3.</p>
<form id="my-form" action="./">
<label>How are you doing today?</label>
<input id="mood" type="text"/>
<button type="submit" value="submit">Submit</button>
</form>
</div>
</div>
</body>
</html>
[/code]
modal.css
[code language=”css”]
#css-only-modal
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #eee;
z-index: 99999999; /* make it to sit on top of all html elements */
opacity:0; /* make it invisible */
/* take 100ms if there is changes to opacity, for example if opacity changes from from 0 to 1 */
-webkit-transition: opacity 100ms ease-in; /* for Chrome and Safari */
-moz-transition: opacity 100ms ease-in; /* for FireFox */
transition: opacity 100ms ease-in; /*for IE*/
pointer-events: none; /*prevent all click, stare and cursor options on this element */
}
/* css :target pseudo selector, matches when the hash in the URL matches example.com/#css-only-dialog */
#css-only-modal:target {
opacity:1; /* changes the opacity to 1 to make it visible when the url is example.com/#css-only-dialog */
pointer-events: auto; /* restores the default functionality */
}
#css-only-modal > div {
width: 500px;
position: relative;
margin: 10% auto;
padding: 2px 10px 10px 10px;
border-radius: 8px; /* make the corner round */
background: #fff;
background: -webkit-linear-gradient(#fff, #0515fa);/* Chrome and Safari, gradient from white color to blue */
background: -moz-linear-gradient(#fff, #0515fa);/* FireFox gradient */
}
#close
{
background: #0515fa;
color: #fff;
text-decoration: none;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
right: -9px;
top: -9px;
border-radius: 9px;
}
#close:hover { background: #bd0f37; }
[/code]
confirm.js, very little jquery for javascript confirm dialog
[code language=”javascript”]
$(document).ready(function(){
$(‘#my-form’).submit(function() {
confirm($(‘#mood’).val());
});
});
[/code]
Search within Codexpedia
Search the entire web