Question

I’m creating a project in asp.net and I looking for Modal Window (like ajax modal popup) in order to use in all dialogs from my application, the problem is that this ajax component is only compatible with ie but not in safari, firefox, etc…

Anyone knows any modal window that I can use with asp:panels (to include asp controls like textbox, listbox, etc…)?…

Thank you in advance

Javier

Answer 1

What I do is use FancyBox which loads the content in a iFrame, so for example I have the option in a simple page, and then open fancybox to load that page.

SetupDialogBox: function (openerClientID, width, height, effect, showCloseButton, buttonsOn, offsetHeight, onStartHandler, onCompleteHandler, onClosedHandler, refreshParentOnClose) {
    if (effect == null) effect = 'none';
    if (width == null) width = 620;
    if (height == null) height = 680;
    if (buttonsOn == null) buttonsOn = false;
    if (showCloseButton == null) showCloseButton = true;
    if (refreshParentOnClose == null) refreshParentOnClose = false;

    if (offsetHeight == null) {
        // adjust for hight for offset based on apperence of buttons
        if (buttonsOn) {                
            offsetHeight = 180;
        }
        else {
            offsetHeight = 140;
        }
    }

    var adjustedHeight = height - offsetHeight;
    var onStartLocal = function () {
        // If you want to show a loading panel, heres a good place to do it
    };
    var onCompleteLocal = function () {
        $('#fancybox-frame').hide();
        // If you want to hide load panel heres a good place to do it
        a$('#fancybox-frame').contents().find('.modalContent').css('height', height - offsetHeight + 'px'); $('#fancybox-frame').fadeIn(2000); };
        $('#fancybox-frame').bind('load', function () {  $('#fancybox-frame').contents().find('.modalContent').css('height', adjustedHeight + 'px'); $('#fancybox-frame').fadeIn(2000); });
    };

    var onClosedLocal = function () { if(refreshParentOnClose) { parent.location.reload(true); } };

    $('#' + openerClientID).fancybox({
        'width': width,
        'height': height,
        'autoScale': false,
        'transitionIn': effect,
        'transitionOut': effect,
        'padding': 0,
        'scrolling': 'no',
        'centerOnScroll': false,
        'hideOnOverlayClick': false,
        'showCloseButton': showCloseButton,
        'type': 'iframe',
        'onStart': function () { onStartLocal(); if (onStartHandler != null && typeof (onStartHandler) != 'undefined') onStartHandler(); },
        'onComplete': function () { onCompleteLocal(); if (onCompleteHandler != null && typeof (onCompleteHandler) != 'undefined') onCompleteHandler(); },
        'onClosed': function () { onClosedLocal(); if (onClosedHandler != null && typeof (onClosedHandler) != 'undefined') onClosedHandler(); }
    });
},

We then insert a link on each page which is the handler for the fancybox frame

<a class="menu" href="http://www.whateverurl.com/myBox.aspx" id="menuLauncher" style="display:none;">&nbsp;</a>

Fire a Javascript call to setup the box

SetupDialogBox('menuLauncher', 820, 360, 'fade', false, null, null, null, null);

Then finally a call which opens the box when clicked (if its elsehwere on the page)

$("#menuLauncher").trigger('click');

alternativly you could just make the menuLauncher visible and use that as a opening link.