jquery - CSS "onclick" pseudo class is not working -
this code taken http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ modifications.
my purpose show modal form , close when user click [x] button @ corner, or automatically close after 10 seconds.
the problem form cannot close when click [x] button. what's wrong in code below?
index.html:
<html> <head> <link href="style.css" rel="stylesheet"> <script src="jquery.min.js"></script> </head> <body> <div id="openmodal" class="modaldialog"> <div> <a href="#close" title="close" class="close">x</a> hi, modal form. </div> </div> <script type="text/javascript"> settimeout(function() { $('#openmodal').fadeout('slow'); }, 10000); </script> </body> </html> style.css:
.modaldialog:target { opacity:0; } .modaldialog { position: fixed; font-family: arial, helvetica, sans-serif; top: 28%; right: 0; bottom: 0; left: 0; z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; } .modaldialog > div { width: 600px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #ffffff; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }
you should call either fadeout/close method in on click event handler of close button.
Comments
Post a Comment