JSFiddle - React, Tailwind, and code Playground

by devdarin

HTML

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<a id="open" href="javascript:;">Open me</a>

CSS

body {background-image:url('http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg');}

JavaScript

$("#open").click(function () {

    $.fancybox.open({
        content: '<iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank"></iframe>',
        autoSize: false,
        width: '80%',
        height: '80%',
        scrolling: 'no',
        afterShow: function () {
            var oIframe = document.getElementById('myFrame');
            var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument);
            iframeDoc.open();
            iframeDoc.write(myContent);
            iframeDoc.close();
            
        }
    });
});

var myContent = '<!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></title><style type=\"text/css\">html{height:100%;}body{height:100%;margin:0px;font-family: Helvetica,Arial;}label{float left;display:block;font-size:13px;padding:5px;clear:both;}input[type=text], input[type=password],select{flot: righ;width:250px;border: 1px solid #3F0B1B;}input[type=text]:focus, input[type=password]:focus, select{background: #DDD;}ol {list-style-type: none;margin:0px;padding-left:15px;}ol ul{margin: 0px; padding: 0px; text-indent: -1em; margin-left: 1em;}.div{border: 1px solid black;}.fancybox{ overflow: hidden !important;}</style></head><body><div><ol> <li><label>Name</label><input type="text" id="name"/></li> <li><label>Phone #</label><input type="text" id="phone"/></li> <li><label>Address Line 1</label><input type="text" id="add1"/></li> <li><label>Address Line 2</label><input type="text" id="add2"/></li> <li><label>Address Line 3</label><input type="text" id="add3"/></li> <li><label>Email Add</label><input type="text" id="email"/></li> <li><label>Age</label><input type="text" id="age"/></li> <li><label>Date Of Birth</label><input type="text" id="dob"/></li> <li><input type="submit" value="Continue"/></li> </ol></div></body></html>';