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

时间:2014-07-08 05:43:37

标签: javascript jquery

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

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

什么是错的......我无法找到任何线索....任何想法?

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;

        }

2 个答案:

答案 0 :(得分:0)

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

#popup_container{
    position: fixed;
}

答案 1 :(得分:0)

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

例如

class Helper:
    d = None

cl = Helper()

def one(a):
    cl.d = a
    cl.d += 1
    return cl.d

def two():
    cl.d += 1
    return cl.d

print ("Please enter a number.")
a = int(input('>> '))

print(one(a))

print(two())