Tuesday, 30 June 2015

Popup using Script

<!DOCTYPE html>
<html>
<head>
<style>
 td {
    padding: 15px;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>


<table style="width:100%">

<tr>

<td><a href="#myPopupDialog" data-rel="popup"  data-transition="flip">FEB23</a>
   <div data-role="popup" id="myPopupDialog">
      <a href="#myPopupDialog" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
       <ul style="list-style-type:square">
         EVENTS:
           <li><a href="http://www.google.com">Visit google</a></li>
        </ul>
     </div>
</td>

<td><a href="#myPopDial" data-rel="popup"  data-transition="flip">FEB24</a>
   <div data-role="popup" id="myPopDial">
      <a href="#myPopDial" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
       <ul style="list-style-type:square">
         EVENTS:
           <li><a href="http://www.w3schools.com/">Visit w3schools</a></li>
        </ul>
     </div>
</td>


<td>
<a href="#myDial" data-rel="popup"   data-transition="flip">FEB25</a>
    <div data-role="popup" id="myDial">
         Siva
    </div>
</td>
</tr>


<tr>
<td><a href="#Dialog" data-rel="popup" data-transition="flip">FEB26</a>
   <div data-role="popup" id="Dialog">
        <a href="#Dialog" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
       <ul style="list-style-type:square">
         EVENTS:
            <li><a href="http://www.msn.com">Visit msn</a></li>
        </ul>
     </div>
</td>

<td>
<a href="#myPopDiaL" data-rel="popup"   data-transition="flip">FEB27</a>
    <div data-role="popup" id="myPopDiaL">
         <a href="#myPopDial" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <ul style="list-style-type:square">
          EVENTS:
            <li><a href="http://www.yahoo.com">Visit yahoo</a></li>
        </ul>
    </div>
</td>
<td>
<a href="#myDialog" data-rel="popup"   data-transition="flip">FEB28</a>
    <div data-role="popup" id="myDialog">
          <a href="#myDialog" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
         <ul style="list-style-type:square">
            EVENTS:
              <li><a href="http://www.jquery.com">Visit JQUERY</a></li>
         </ul>      
    </div>
</td>
</tr>

</table>

No comments:

Post a Comment