How to open simple HTML CSS popup

HTML

<div class="main-roomle-popup-bg"></div>
<div class="main-roomle-popup">
     <div class="main-roomle-box">
        <h4>Popup heading</h4>
        <p>You can put message here.</p>
        <div class="modul-close-btn"><a href="#"><img src="close.png"/></a></div>
     </div>
</div>

CSS

<style type="text/css">
body {margin: 0;padding: 0;width: 100%;} .main-roomle-popup-bg {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: #000; opacity: 0.5;} .main-roomle-popup {margin:0;width: 100%;text-align: center;z-index: 1;} .main-roomle-box {margin: auto;padding: 20px;width: 360px;height: 130px;background: #000;position: absolute;top: 0;right: 0;left: 0;bottom: 0;} .main-roomle-box h4 {margin: 0;padding: 0 0 40px 0;font-size: 22px;color: #fff;line-height: 22px;} .main-roomle-box p {margin: 0;padding: 0;font-size: 18px;color: #fff;} .modul-close-btn {margin: 0;padding: 0;width: 30px;height: 30px;position: absolute;right: -10px;top: -10px;}
</style>