SO Question 24480015

by TexasBrawler

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<p class="dialog_trigger" id="id_1">This is <code>id_1</code></p>
<p class="dialog_trigger" id="id_2">This is <code>id_2</code></p>
<p class="dialog_trigger" id="id_42">This is <code>id_42</code></p>

<div id='dialog1' title='title1 - FOO!' style='display: none;'>This is dialog <strong>1</strong><br/>foo</div>
<div id='dialog2' title='title2 - BAR!!' style='display: none;'>This is dialog <strong>2</strong><br/>bar</div>
<div id='dialog42' title='title42 - BAZ!!!' style='display: none;'>This is dialog <strong>42</strong><br/>baz</div>

JavaScript

// Variables for setting up our dialogs
var dialogs = {
    dialog1: {id: 'id_1', func: 'foo'},
    dialog2: {id: 'id_2', func: 'bar'},
    dialog42: {id: 'id_42', func: 'baz'}
    /* etc. */
    };
window.dialogs = dialogs; // to make it accessible globally if not already -- this is a jsFiddle quirk

// Functions for the OK button actions
window.foo = function() {
    alert('foo called');
}
window.bar = function() {
    alert('bar called');
}
window.baz = function() {
    alert('baz called');
}

// A handler for all of the OK buttons
function callOKButtonAction( dialog_name ) {
    var tmpfunc = new Function(dialogs[dialog_name].func + '()' );
    tmpfunc();
}

// Initialize the dialogs
$(function() {
    for(var dialog_name in dialogs) {
        if(typeof(dialogs[dialog_name].id) !== 'string') {
            continue;
        }
        // Dialog
        $('#' + dialog_name).dialog({
            stack: false,
            autoOpen: false,
            width: 500,
            buttons: {
                "OK": function() {
                    callOKButtonAction( $(this).prop('id') );
                },
                "Close": function() { 
                    $(this).dialog("close"); 
                }
            }
        });
    }
    
    // Dialog Links
    $('.dialog_trigger').click(function(){
        var id = $(this).prop('id');
        for(var dialog_name in dialogs) {
            if(typeof(dialogs[dialog_name].id) !== 'string') {
                continue;
            }
            if( id == dialogs[dialog_name].id ) {
                $('#'+dialog_name).dialog('open');
            }
        }
        return false;
    });
});