Create simple popup using HTML CSS

HTML

<div class="main-chaty-popup-bg"></div>
<div class="main-chaty-popup">
      <div class="main-chaty-box">
              <h4>Chaty is currently off</h4>
              <div class="popup-content">
                       <div class="popup-content-wrapper"> Chaty is currently turned off, would you like to save and show it on your site? </div>
              </div>
              <div class="popup-content-footer">
                      <button type="button" class="btn btn-primary">Yes, Show it on my site</button>
                      <button type="button" class="btn btn-default">Just save and keep it off</button>
              </div>
              <div class="modul-close-btn">
                       <a href="#"> X </a>
              </div>
        </div>
 </div>

CSS

<style type="text/css">
    .main-chaty-popup-bg {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: #000; opacity: 0.5;z-index: 111;}
    .main-chaty-popup {margin:0;width: 100%;text-align: center;z-index: 1;}
    .main-chaty-box {margin: auto; padding: 0px; width: 660px; height: 170px; background: #FFF; position: fixed; top: 0; right: 0; left: 0; bottom: 0;z-index: 999;}
    .main-chaty-box h4 {background: #FCFCFC; margin: 0;padding: 10px 0 10px 10px;font-size: 22px;color: #626262;line-height: 22px;text-align: left;border-bottom: 1px solid #e5e5e5;}
    .modul-close-btn {position: absolute; right: 18px; top: 20px; transform: translate(50%, -50%); background: linear-gradient(0deg, #333, #333), linear-gradient(153.18deg, #6371DB 7.07%, #FF89C4 90.47%); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center;justify-content: center;padding: 0; border: 0; z-index: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); cursor: pointer;}
    .popup-content-footer{position: absolute;bottom: 0; width: 100%; padding: 10px 0;border-top: 1px solid #e5e5e5;}
    .popup-content-footer .btn-primary{background:#00C67C;border: none;padding: 10px;color: #FFF;cursor: pointer;box-shadow: 1px 1px 2px 1px #000;border-radius: 5px;margin-right: 15px;}   
    .popup-content-footer .btn-default{background:#F7F7F7;border: none;padding: 10px;color: #655d5d;cursor: pointer;box-shadow: 1px 1px 2px 1px #000;border-radius: 5px;}
   .popup-content-wrapper{margin-top: 25px;}
 </style>

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>

Calendar.setup Calendar popup not display proper on Magento admin panel

HTML Code

<td class="label"><label for="tran_date">Date</label></td>
<td class="value">
    <input name="deposit[created_at]" id="tran_date" type="text" class="input-text" value="<?php echo Mage::getModel('core/date')->gmtDate('m/d/Y'); ?>"/>
    <img src="<?php echo $this->getSkinUrl('images/grid-cal.gif') ?>" class=""
        id="tran_date_trig"/>
    <div id="calendar--flat"></div>
</td>
</tr>

SCRIPT

 <script type="text/javascript">
// <![CDATA[
Calendar.setup({
flat: 'calendar--flat',
ifFormat: '%m/%e/%Y',
button: 'tran_date_trig',
align: 'Bl',
singleClick: true,
onSelect: function(dateText,selectedDate) {
    jQuery('#tran_date').val(selectedDate);
    jQuery('#calendar--flat').hide();
}
});
// ]]>
</script>

CSS

#calendar--flat {
    position: absolute;
}