首先抱歉,如果我问了一个愚蠢的问题,因为我没有太多使用 JQuery 的经验。
我的问题是我正在使用带有 YES NO 按钮的 Jquery 警报(而不是使用具有 OK 和 Cancel 按钮的 JSP 默认 CONFIRM 对话)。现在,当我使用 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;
}
最佳答案
我相信这是因为造型。下面的 CSS 代码应强制 #popup_container
显示在一个预定义位置 [(0,0) 是默认位置]。
#popup_container{
position: fixed;
}
关于javascript - Jquery确认对话框出现在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24624476/