Question

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

任何人都知道我可以使用asp：面板的任何模态窗口（包括像文本框，列表框等的asp控件......）？...

提前谢谢

哈维尔

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调用以设置框

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

然后最后一个调用，点击时打开该框（如果它在页面上的其他地方）

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

另外，你可以让menuLauncher可见，并将其用作开放链接。

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

1 个答案: