<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test Dialog</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="testDialog.js"></script>
<style>
iframe
{
width: 100%;
height: 100%;
}
#dialogPlace
{
width: 100%;
height: 80%;
background-color: red;
display: none;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="Search..." />
<button>Search!</button>
</div>
<div>
<div id="dialogPlace">
</div>
<button id="openModalDialog">Open Modal Dialog!</button>
<button id="openNoModalDialog">Open No Modal Dialog!</button>
</div>
</body>
</html>
$(function () {
var createForm = function (element) {
element.className = "Hoa";
var doc = element.ownerDocument;
var container = doc.createElement("div");
var label = doc.createElement("label");
var input = doc.createElement("input");
var button = doc.createElement("input");
label.textContent = "Email";
input.type = "text";
input.value = "Email@address.com";
button.type = "button";
button.value = "submit";
var labelPass = doc.createElement("label");
var inputPass = doc.createElement("input");
labelPass.textContent = "Password";
inputPass.type = "password";
inputPass.value = "xxxxxxxx";
container.appendChild(label);
container.appendChild(input);
container.appendChild(labelPass);
container.appendChild(inputPass);
container.appendChild(button);
element.appendChild(container);
};
var openModal = function (modal) {
var container = document.createElement("div");
//var iFrame = document.createElement("div");
//createForm(iFrame);
var iFrame = document.createElement("iframe");
iFrame.onload = function () {
createForm(iFrame.contentDocument.body);
};
//iFrame.src = "innerDialog.html";
container.appendChild(iFrame);
dialogPlace[0].appendChild(container);
$(container).dialog({
autoOpen: true,
modal: modal,
width: dialogPlace.width() * 0.8,
height: dialogPlace.height() * 0.8,
open: function () {
dialogPlace.show();
},
close: function () {
dialogPlace.hide();
dialogPlace.empty();
}
});
};
var dialogPlace = $("#dialogPlace");
$("button").button();
$("#openModalDialog").click(function () {
openModal(true);
});
$("#openNoModalDialog").click(function () {
openModal(false);
});
});
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |