Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<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

Dismiss x
public
Bin info
anonymouspro
0viewers