background: '#fff', opacity: '0.7' : UI Dialog « jQuery « JavaScript DHTML






  1. JavaScript DHTML
  2. jQuery
  3. UI Dialog

background: '#fff', opacity: '0.7'

 


<html>
  <head>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.dialog.js"></script>
  <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />

    <script type='text/javascript'>
$(document).ready(
  function() {
    $('div#tmpExample').dialog({
      modal: true,
      overlay : {
        background: '#fff',
        opacity: '0.7'
      }
    });
  }
);
    </script>

  </head>
  <body>

    <div id='tmpExample' title='Lorem Ipsum'>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In 
        sagittis commodo ipsum. Donec est. Mauris eget arcu. Suspendisse 
        tincidunt aliquam velit. Maecenas libero. Aliquam dapibus 
        tincidunt eros. Donec suscipit tincidunt odio. Maecenas congue 
        tortor non ligula. Phasellus vel elit. Suspendisse potenti. Nunc 
        odio quam, hendrerit ac, imperdiet sit amet, venenatis sed, enim.
      </p>
    </div>
  </body>
</html>








Related examples in the same category

1.jQuery UI Dialog
2.Basic Dialog modal
3.Modal confirmation
4.Modal form
5.Modal message
6.Set dialog height
7.Add ok button to dialog and link with event handler
8.Dialog open event
9.Dialog closed event
10.Dialog animation: close
11.Open a dialog through a button click event
12.Close a button after pressing OK button
13.Set auto open to true
14.Destroy a dialog
15.Get the input value from a dialog
16.Slide in/out dialog
17.resizable: false, draggable: false
18.show: 'explode'
19.Closed action