Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
 /*
  * Creates the 'X' used to close dialog
  */
 .ui-state-hover .ui-icon, .ui-state-focus .ui-icon 
 {
     background-image: url("../Assets/Images/X.png") !important;
 }  
 
 .ui-icon 
 {
     background-image: url("../Assets/Images/X.png") !important;
 }
 
 /*
  * Removes padding from title bar
  */
 .ui-dialog .ui-dialog-titlebar 
 {
     padding: 0;
     position: relative;
 }
 
 .ui-widget-header {
     background: transparent repeat-x scroll 50% 50% #FFFFFF !important;
     border: 1px solid #E78F08;
     color: #FFFFFF;
     font-weight: bold;
 }
</style>
</head>
<body>
  <div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
​
</body>
</html>
 
$( "#dialog" ).dialog();
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers