JSFiddle - React, Tailwind, and code Playground

by Sanjay Ingole

HTML

<button id="img_dialog_trigger">Open The Dialog</button>
<a id="img_dialog_link" href="#" rel="http://google.about.com/b/2013/04/01/google-nose.htm" id="">test</a>
<div id="img_dialog" style="display:none; overflow : hidden;" title="Dialog Title">
<iframe id="image-iframe" frameborder="0" scrolling="no" width="500" height="300" src="">
</iframe>
</div>

CSS

.noTitleStuff .ui-dialog-titlebar {display:none; border : 1px;}

JavaScript

var dialogEffect = 'fade';
var dialogDirection = 'left';
var dialogSpeed = 2000;

$( "#img_dialog_trigger" ).click(function() {
$( "#img_dialog" ).dialog( "open" );
});


$("#img_dialog_link").click(function() {
    $( "#image-iframe" ).attr("src", $(this).attr("rel"));
    $( "#img_dialog" ).dialog( "open" );
});

$("#img_dialog").dialog({
    autoOpen: false,
    position: 'center' ,
    title: 'EDIT',
    draggable: false,
    width : 500,
    height : 400, 
    resizable : true,
    modal : true,
    dialogClass: 'noTitleStuff',
     show: {
        effect: dialogEffect,
        direction: dialogDirection,
        speed: dialogSpeed
     },
     hide: {
        effect: dialogEffect,
        direction: dialogDirection,
        speed: dialogSpeed
     }
});