dialog box with diff data attributes

by Akram kamal

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<!-- the data-target attribute defines the selector for the element that will host the dialog -->
<a class="openDialog" href="javascript:;" data-target="#apple">Apple</a> 

<a class="openDialog" href="javascript:;" data-target="#banana">Banana</a>

<div id="apple" class="hidden">
    <a class="closeButton" href="javascript:;">Close Dialog</a>
    <!-- the data-src attribute defines the iframe's source, but the contents are not actually loaded until the dialog 'open' event occurs -->
    <iframe class="dialog-iframe" data-src="http://blog.jsfiddle.net/"></iframe>
</div>

<div id="banana" class="hidden">
    <a class="closeButton" href="javascript:;">Close Dialog</a>
    <iframe class="dialog-iframe" data-src="http://doc.jsfiddle.net/"></iframe>
</div>

CSS

.hidden {
    display: none;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.dialog-iframe {
    width: 200px;
    height: 200px;
}

.closeButton {
    display: block;
}

JavaScript

// generic handler to open a dialog
$(document).on('click', '.openDialog', function(e) {   
    var target = $(this).data('target');
    $(target).dialog('open');
});


// generic event handler to close any dialog containing
// an element decorated with the closeButton class
$(document).on('click','.closeButton', function(e) {
    // find the dialog that contains this .closeButton
    var $dialog = $(this).parents('.ui-dialog-content');
    $dialog.dialog('close');
});

// create the dialogs
$('#apple,#banana').dialog({    
        // http://api.jqueryui.com/dialog/
        // the close button can be hidden via CSS & dialogClass setting 
    dialogClass: 'no-close', 
    resizable: false,
    autoOpen: false,
    modal: false,
    width: 'auto',
    height: 'auto',    
    draggable: true,
    beforeClose: function( event, ui ) {
       // call your code that triggers your save
       // if you need to interact with the iframe, maybe try this:
       // http://stackoverflow.com/a/3407632/740639
       alert('saving data...');        
    },    
    open: function (event, ui) {       
        // load the iframe's src when the dialog is opened
        var $iframe = $(this).children('iframe');
       if(!$iframe.attr('src')) {
          var src = $iframe.data('src');
          $iframe.attr('src', src);
       }
    }
});