Html5 Popup Window



  • The Popup window is a child window. That will be used to get more interaction to the user.
  • The popup window may trigger by an event or triggered by a specified time.

Sample coding for Html5 Popup Window

Tryit<!DOCTYPE html>
<html>
   <head>
        <title> Wikitechy Html5 Popup Window</title>
         <link rel="stylesheet" type="text/css" href="subs-style.css">
   </head>
    <body>
        <h2>Html5 Popup Window</h2>
        <a href="#openPopup">Open Popup</a>
        <div id="openPopup" class="myPopup">
            <div>
                <a href="#close" title=" Close" class="close">X</a> 
                <h2>POPUP WINDOW</h2> 
                <p>Hello!</p>
                <p>Welcome to Wikitechy this is a popup window created using HTML and CSS</p>
            </div>
        </div> 
    </body>
</html>

Code Explanation for Html5 Popup Window

code explanation for  Html5 Popup Window

  1. The External CSS style sheet file popup.css will be linked for apply styles to the popup window.
  2. The link to open the popup window.
  3. The popup window content will be place inside the <div> tag which has id attribute as openPopup.
  4. The close button of the popup window is defined in the <a> tag.

Sample coding for HTML5 Popup Window popup.css

Tryit
    
.myPopup {
position: relative;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}
.myPopup:target {
opacity:1;}
.myPopup > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #71a6fc;
background: -moz-linear-gradient(#71a6fc, #fff);
background: -webkit-linear-gradient(#71a6fc, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
-webkit-border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }	


  

Code Explanation for Html5 Popup Window subs-style.css

Output for Html5 Popup Window subs-style.css

  1. The CSS styles to design popup window.
  2. The popup:target is used to show the popup window when the url target changed to #openPopup.
  3. The CSS styles to design popup <div> tag.
  4. The CSS style to design close button of the popup window.
  5. The CSS style to design close button hover event.

Output for Html5 Popup Window

Output for Html5 Popup Window

  1. That the output shows Open Popup link.
Output for Html5 Popup Window

  1. When user click the Open Popup link then the POPUP WINDOW will be displayed.
Output for Html5 Popup Window

  1. The Close button is displayed Right corner of the popup window..
Output for Html5 Popup Window

  1. When user click the close button then the popup window will be closed

Browser Support for Html5 Popup Window

Yes Yes Yes Yes Yes

Related Searches to htmL Popup Window