Open a modal pop in HTML5 is very simple with the help of CSS3.
HTML Part
<a href="#Modal">Modal Popup</a> <div id="Modal" class="modalDialogBox"> <div> <a href="#close" title="Close" class="closeButton">X</a> <h2>Modal Popup window</h2> <table style="width: 100%"> <tr> <td>Description - CSS3 make it simple to open a modal popup.</td> </tr> </table> </div> </div>
CSS Part
<style> .modalDialogBox{ position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialogBox:target { opacity: 1; pointer-events: auto; } .modalDialogBox > div { width: 600px; position: relative; margin: 20% 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); } .closeButton{ 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; } .closeButton:hover { background: #00d9ff; } </style>