Open div tag based dialog : show « jQuery « JavaScript DHTML






  1. JavaScript DHTML
  2. jQuery
  3. show

Open div tag based dialog

 
<html>
  <head>
    <script type='text/javascript' src='js/jquery-1.3.2.js'></script>
    <script type='text/javascript'>
$(document).ready(
  function() {
    $('input#tmpOpen').click(
      function($e) {
        $('div#myDialog').show(5000);
      }
    );
    
    $('input#tmpClose').click(
      function($e) {      
        $('div#myDialog').hide(5000);
      }
    );
  }
);
    </script>
    <style type='text/css'>
div#myDialog {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 200px;
    margin: -101px 0 0 -251px;    
    border: 1px solid rgb(128, 128, 128);
}

div#tmpButtons {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
    </style>
  </head>
  <body>
     <input type='submit' id='tmpOpen' value='Open' />
     <div id='myDialog'>
       <p>
         Dialog content
       </p>
       <div id='tmpButtons'>
         <input type='submit' id='tmpClose' value='Close' />
       </div>
     </div>
  </body>
</html>








Related examples in the same category

1.Display if hidden
2.Show fast
3.Show hidden fast
4.Show hidden slow
5.Show hidden tags
6.Show in millisecond
7.Show normal
8.Pass arguments.callee to show function
9.Shows all paragraphs.