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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery UI Dialog Duplicate Element Bug Demo</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    <style type="text/css">
      #content {
        float: left;
        width: 500px;
      }
      #sidebar {
        border: 1px solid #ccc;
        float: right;
        padding: 5px;
        width: 150px;
      }
      #content table {
        border: 1px solid #ccc;
        border-collapse: collapse;
      }
      #content table th,
      #content table td {
        border: 1px solid #ccc;
        padding: 5px;
      }
      #modalContent {
        display: none;
      }
      .ui-dialog-titlebar {
        display: none;
      }
    </style>
  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
​
<body>
    <div id="content">
        <table>
            <tr>
                <th>First Name</td>
                <th>Last Name</th>
                <th>Actions</th>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td><a href="javascript:load('John', 'Doe')">Load</a></td>
            </tr>
            <tr>
                <td>Foo</td>
                <td>Bar</td>
                <td><a href="javascript:load('Foo', 'Bar')">Load</a></td>
            </tr>
        </table>
    </div>
​
    <div id="sidebar">
        <h3>User Details</h3>
        <div id="name"></div>
        <div id="details"></div>
    </div>
</body>
</html>
 
function load(firstName, lastName) {
  $('#name').text(lastName + ', ' + firstName);
  // faked ajax response
  var html = '<div></div><a href="javascript:openModal();">Load Modal</a><div id="modalContent">I am modal content. <a href="javascript:closeModal()">Close Modal</a></div>';
  $('#details').html(html);
}
​
function openModal() {
  $('#modalContent').dialog({ title: '' });
}
​
function closeModal() {
  $('#modalContent').dialog('destroy');
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers