HTML 5 - POP UP
Autor: Luy | Publicado: 2016-06-02T14:12:00-03:00



&lt;!DOCTYPE html&gt;
&lt;head&gt;
&nbsp;&nbsp;&nbsp; &lt;title&gt;Creating a modal window with HTML5 &amp;amp; CSS3&lt;/title&gt;
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &lt;style&gt;
&nbsp;&nbsp;&nbsp;&nbsp; #openModal {
&nbsp;&nbsp;&nbsp; position:relative;
&nbsp;&nbsp;&nbsp; z-index:1;
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; #popup
{
&nbsp;&nbsp;&nbsp; position:absolute;
&nbsp;&nbsp;&nbsp; z-index:2;
&nbsp;&nbsp;&nbsp; left:300px;
&nbsp;&nbsp;&nbsp; top:35px;
&nbsp;&nbsp;&nbsp; display:none;
&nbsp;&nbsp;&nbsp; width:500px; 
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 5px 20px 13px 20px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: 10px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -moz-linear-gradient(#fff, #999);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -webkit-linear-gradient(#fff, #999);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: -o-linear-gradient(#fff, #999);
}


&nbsp;&nbsp;&nbsp; .close {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: #606061;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: #FFFFFF;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height: 25px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; right: -12px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top: -10px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 24px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-decoration: none;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: bold;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-border-radius: 12px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -moz-border-radius: 12px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: 12px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 3px #000;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 3px #000;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 3px #000;
&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; .close:hover { background: #00d9ff; }
&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &lt;/style&gt;
&nbsp;&nbsp;&nbsp; 
&lt;/head&gt;

&lt;body&gt;

&lt;div id="popup"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#close" onclick="hide('closer'); hide('popup')" id="closer" title="Close" class="close"&gt;X&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;Modal Box&lt;/h2&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;This is a sample modal box that can be created using the powers of CSS3.&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.&lt;/p&gt;
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&lt;/div&gt;&nbsp;&nbsp;&nbsp; 

&lt;div id="openModal" class="modalDialog"&gt;
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;TESTE&lt;/h2&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;POP UP CSS3.&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.&lt;/p&gt;

&lt;/div&gt;


&lt;script&gt;
&nbsp;&nbsp;&nbsp; document.getElementById('popup').style.display = 'block';
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; function hide(id)
&nbsp;&nbsp;&nbsp; {
&nbsp;&nbsp;&nbsp; document.getElementById(id).style.display = "none";
&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;