Как реализовать модальное окно в asp.net?

Question

Я создаю проект в asp.net и ищу модальное окно (например, модальное всплывающее окно ajax), чтобы использовать его во всех диалоговых окнах моего приложения, проблема в том, что этот компонент ajax совместим только с ie, но нев safari, firefox и т. д. *

Кто-нибудь знает любое модальное окно, которое я могу использовать с панелями asp: (для включения элементов управления asp, таких как textbox, listbox и т. д ...)? ...

Заранее спасибо

Хавьер

Answer 1

Я использую FancyBox , который загружает содержимое в iFrame, поэтому, например, у меня есть опция на простой странице, а затем откройте fancybox, чтобы загрузить эту страницу.

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(); }
    });
},

Затем мы вставляем ссылку на каждую страницу, которая является обработчиком для рамки fancybox

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

Запустите вызов Javascript для установки окна

* * 1010

Затем, наконец, вызов, который открывает окно при нажатии (если его еще нет на странице)

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

альтернативно, вы можете просто сделать menuLauncher видимым и использовать его в качестве начальной ссылки.