JQuery 警报未垂直居中

Question

我正在使用旧的 jquery 插件来替换警报消息。我遇到的问题是警报是向屏幕顶部弹出而不是浮动到中心。我试图修改 CSS 以包含

margin-left: auto; 
margin-right: auto;

无果。

我想修改此 jquery 功能，使其自动垂直和水平居中，而不管页面的高度或宽度如何。这是一个 JSFiddle 给出的问题示例。

任何帮助将不胜感激。

Answer 1

我给了一个

高度:200px;

至#popup_container

并在 jquery 函数中使

垂直偏移量：0，

请试一试，说出结果。

编辑：

这是[我的fiddle][1]

我刚刚编辑
垂直偏移量：0

在 jquery 中。就这些了。

    [1]: http://jsfiddle.net/oneNiceFriend/ms8kwdj7/1/

Answer 2

我可以通过将定位从绝对定位更改为固定定位来解决这个问题。这是一个带有更改的 jSFiddle Working example on JSFiddle

// jQuery Alert Dialogs Plugin
//
// Version 1.1
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 14 May 2009
//
// Website: http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
//
// Usage:
//      jAlert( message, [title, callback] )
//      jConfirm( message, [title, callback] )
//      jPrompt( message, [value, title, callback] )
// 
// History:
//
//      1.00 - Released (29 December 2008)
//
//      1.01 - Fixed bug where unbinding would destroy all resize events
//
// License:
// 
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC.
//
(function($) {

$.alerts = {

    // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time

    verticalOffset: -175,                // vertical offset of the dialog from center screen, in pixels
    horizontalOffset: 0,                // horizontal offset of the dialog from center screen, in pixels/
    repositionOnResize: true,           // re-centers the dialog on window resize
    overlayOpacity: .01,                // transparency level of overlay
    overlayColor: '#FFF',               // base color of overlay
    draggable: true,                    // make the dialogs draggable (requires UI Draggables plugin)
    okButton: '&nbsp;OK&nbsp;',         // text for the OK button
    cancelButton: '&nbsp;Cancel&nbsp;', // text for the Cancel button
    dialogClass: null,                  // if specified, this class will be applied to all dialogs

    // Public methods

    alert: function(message, title, fieldFocus) {
        if( title == null ) title = 'Alert';
        $.alerts._show(title, message, null, 'alert', fieldFocus);
    },

    confirm: function(message, title) {
        if( title == null ) title = 'Confirm';
        $.alerts._show(title, message, null, 'confirm');
    },

    prompt: function(message, value, title) {
        if( title == null ) title = 'Prompt';
        $.alerts._show(title, message, value, 'prompt');
    },

    // Private methods

    _show: function(title, msg, value, type, field) {
        fieldFocus = '[name="' + field + '"]'; 
        $.alerts._hide();
        $.alerts._overlay('show');

        $("BODY").append(
          '<div id="popup_container">' +
            '<h1 id="popup_title"></h1>' +
            '<div id="popup_content">' +
              '<div id="popup_message"></div>' +
            '</div>' +
          '</div>');

        if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);

        // IE6 Fix
        var pos = 'fixed';
        //var pos = 'absolute'; 
        var rel = 'relative'; 

        $("#popup_container").css({
            position: pos,
            zIndex: 99999,
            padding: 0,
            margin: 0
        });

        $("#popup_title").text(title);
        $("#popup_content").addClass(type);
        $("#popup_message").text(msg);
        $("#popup_message").html( $("#popup_message").text().replace(/\n/g, '<br />') );

        $("#popup_container").css({
            minWidth: $("#popup_container").outerWidth(),
            maxWidth: $("#popup_container").outerWidth()
        });

        $.alerts._reposition();
        $.alerts._maintainPosition(true);

        switch( type ) {
            case 'alert':
                $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');
                $("#popup_container").click( function() {
                    $.alerts._hide();
                    $(fieldFocus).focus();
                });
                $("#popup_ok").click( function() {
                    $.alerts._hide();
                    $(fieldFocus).focus();
                });
                $("#popup_ok").focus().keypress( function(e) {
                    if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');
                });
            break;
            case 'confirm':
                $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
                $("#popup_ok").click( function() {
                    $.alerts._hide();
                });
                $("#popup_cancel").click( function() {
                    $.alerts._hide();
                });
                $("#popup_ok").focus();
                $("#popup_ok, #popup_cancel").keypress( function(e) {
                    if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
                    if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
                });
            break;
            case 'prompt':
                $("#popup_message").append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
                $("#popup_prompt").width( $("#popup_message").width() );
                $("#popup_ok").click( function() {
                    var val = $("#popup_prompt").val();
                    $.alerts._hide();
                });
                $("#popup_cancel").click( function() {
                    $.alerts._hide();
                });
                $("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {
                    if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
                    if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
                });
                if( value ) $("#popup_prompt").val(value);
                $("#popup_prompt").focus().select();
            break;
        }

        // Make draggable
        if( $.alerts.draggable ) {
            try {
                $("#popup_container").draggable({ handle: $("#popup_title") });
                $("#popup_title").css({ cursor: 'move' });
            } catch(e) { /* requires jQuery UI draggables */ }
        }
    },

    _hide: function() {
        $("#popup_container").remove();
        $.alerts._overlay('hide');
        $.alerts._maintainPosition(false);
    },

    _overlay: function(status) {
        switch( status ) {
            case 'show':
                $.alerts._overlay('hide');
                $("BODY").append('<div id="popup_overlay"></div>');
                $("#popup_overlay").css({
                    position: 'fixed',
                    zIndex: 99998,
                    top: '0px',
                    left: '0px',
                    width: '100%',
                    height: $(document).height(),
                    background: $.alerts.overlayColor,
                    opacity: $.alerts.overlayOpacity
                });
            break;
            case 'hide':
                $("#popup_overlay").remove();
            break;
        }
    },

    _reposition: function() {
        var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;
        var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;
        if( top < 0 ) top = 0;
        if( left < 0 ) left = 0;


        $("#popup_container").css({
            top: top + 'px',
            left: left + 'px'
        });
        $("#popup_overlay").height( $(document).height() );
    },

    _maintainPosition: function(status) {
        if( $.alerts.repositionOnResize ) {
            switch(status) {
                case true:
                    $(window).bind('resize', $.alerts._reposition);
                break;
                case false:
                    $(window).unbind('resize', $.alerts._reposition);
                break;
            }
        }
    }

}

// Shortuct functions
jAlert = function(message, title, fieldFocus) {
    $.alerts.alert(message, title, fieldFocus);
}

jConfirm = function(message, title) {
    $.alerts.confirm(message, title);
};

jPrompt = function(message, value, title) {
    $.alerts.prompt(message, value, title);
};

})(jQuery);

$("#test").on('click', function() {
jAlert("This is a test", 'Error', 'test');
});

JQuery 警报未垂直居中

JQuery Alerts not centering vertically

jquery

plugins

alerts