Jquery 确认对话框出现在页面底部

Question

首先抱歉，如果我问的是一个愚蠢的问题，因为我没有太多使用 JQuery 的经验。

我的问题是我正在使用带有 YES NO 按钮的 Jquery 警报（而不是使用具有 OK 和 Cancel 按钮的 JSP 的默认 CONFIRM dailog）。现在，当我使用 JQuery 时，应用程序通过 Yes No 按钮向用户显示正确的消息，但屏幕上没有弹出警告框，而是显示在页面底部。

怎么了……我找不到任何线索……知道吗？

jQuery.alerts.okButton = ' Yes ';
jQuery.alerts.cancelButton = ' No ';


jConfirm('Do you want to change the default case?', 'Confirm', function(r) {
    if (r == false)
    {
        alert('No Clicked');

    }
    else
    {
        alert('Yes Clicked');
    }

});

其中 JConfirm() 方法在相关的 .JS 文件中定义如下

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

其中相关的确认方法为：

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

而_show方法是：

    _show: function(title, msg, value, type, callback) {

        $.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 = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed'; 

        $("#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_ok").click( function() {
                    $.alerts._hide();
                    callback(true);
                });
                $("#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();
                    if( callback ) callback(true);
                });
                $("#popup_cancel").click( function() {
                    $.alerts._hide();
                    if( callback ) callback(false);
                });
                $("#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();
                    if( callback ) callback( val );
                });
                $("#popup_cancel").click( function() {
                    $.alerts._hide();
                    if( callback ) callback( null );
                });
                $("#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;
            case 'confirmyesno':
                $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.yesButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.noButton + '" id="popup_cancel" /></div>');
                $("#popup_ok").click( function() {
                    //alert("press yes button");
                        $.alerts._hide();
                        if( callback ) callback(true);
                });
                $("#popup_cancel").click( function() {
                    //alert("press no button");
                    $.alerts._hide();
                    if( callback ) callback(false);
                });
                $("#popup_cancel").focus();
            break;

        }

Answer 1

如果您使用的是 npm：请确保您已将 CSS 导入到您的页面中

例如

@import "~jquery-confirm/dist/jquery-confirm.min.css";

Answer 2

我相信这是因为样式。下面的 CSS 代码应该强制 #popup_container 显示在一个预定义的位置 [(0,0) 是默认位置]。

#popup_container{
    position: fixed;
}