如何在asp.net中实现模态窗口？答案

【问题标题】：How to implement modal window in asp.net?如何在asp.net中实现模态窗口？
【发布时间】：2011-11-16 18:32:28
【问题描述】：

我正在 asp.net 中创建一个项目，我正在寻找模态窗口（如 ajax 模态弹出窗口）以便在我的应用程序的所有对话框中使用，问题是这个 ajax 组件仅与 ie 兼容，但不兼容在 safari、firefox 等...

任何人都知道我可以与 asp:panels 一起使用的任何模式窗口（包括文本框、列表框等 asp 控件）？...

提前谢谢你

哈维尔

【问题讨论】：

标签： dialog window modal-dialog

【解决方案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 调用来设置盒子

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

最后是一个调用，点击时打开框（如果它在页面上）

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

或者，您可以让 menuLauncher 可见并将其用作打开链接。

【讨论】：

谢谢约翰...但我不能在我的项目中实现这个示例。我想我不知道一些我认为我遗漏了一些重要步骤的步骤。你能给我一个简单的示例代码吗？
恐怕我不能分享整个代码库，因为很多代码库都在我们使用的框架中，上面唯一缺少的就是 jQuery 库和 LightBox 库（链接到上面的灯箱）
没问题约翰，我想我有办法了。我的项目现在可以使用 jQuery UI。谢谢你的回答...