Jquery confirm dialog appears at the bottom of page

Question

first of all sorry if i am asking a silly question, as i dont have much experience in using JQuery.

My prolem is that i am using a Jquery alert with YES NO button (rather than using the default CONFIRM dailog of JSP which have the OK and Cancel button). Now when i use the JQuery, application is displaying the correct message to the user with Yes No buttons but the alert box is not poping out on the screen, instead it display at the bottom of the page.

Whats wrong ... i am unable to find any clue.... Any idea?

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');
    }

});

where as the JConfirm() method is defined in the related .JS file as follows

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

Where as the related confirm method is:

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

and the _show method is:

    _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;

        }

Check out the [Documentation for position on the jQuery UI site](http://api.jqueryui.com/dialog/#option-position) — , Jul 08 '14 at 05:46
please append your code. if you load your code dynamically maybe this link help you http://stackoverflow.com/questions/20819501/jquery-click-event-not-working-for-dynamically-created-button/20819663#20819663 — Majid Golshadi, Jul 08 '14 at 05:47

score 1 · Accepted Answer · answered Jul 08 '14 at 06:50

1

I believe it's because of styling. CSS code below should force #popup_container to be displayed in one, predefined place [(0,0) is the default position].

#popup_container{
    position: fixed;
}

answered Jul 08 '14 at 06:50

Enethion

1,199
9
9

Silveraven, thx for your time but i am unable to understand the change u r suggesting. Can u please type the exact code change from my above posted code... – bilal Jul 08 '14 at 07:24
All the code you added is jQuery. Styling for page you should do in CSS (`` in `` section for example). That's exactly what I meant. – Enethion Jul 08 '14 at 08:34
@ Silveraven: Thx for your time. My problem is resolved now but slightly different way. I have to change the 'position' to 'absolute' rather than fixed and it works for me. – bilal Jul 10 '14 at 04:42
Well, it depends on what you want to get :) Good to know that you've solved it. – Enethion Jul 10 '14 at 06:19

score 1 · Answer 2 · answered Dec 31 '19 at 08:04

1

If you are using npm: Make sure you imported CSS into your page

e.g.

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

answered Dec 31 '19 at 08:04

Ramin

351
2
7

Jquery confirm dialog appears at the bottom of page

2 Answers2