如何自定义警报框的 css 字段？答案

【问题标题】：How to customise the css fields of an alert box?如何自定义警报框的 css 字段？
【发布时间】：2013-06-24 10:25:40
【问题描述】：

我的要求是自定义带有 css 属性的警报框。目前我正在通过以下代码实现类似的目标：

查询：

$('<div class="alertMessage">Error first</div>')
.insertAfter($('#componentName'))
.fadeIn('fast')
.animate({opacity: 1.0}, 2200)
.fadeOut('fast', function() {
    $(this).remove();
});

CSS：

.alertMessage {
    width: 95%;
    margin: 1em 0;
    padding: .5em;

    background-image: -ms-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: -moz-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: -o-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #F07E1A), color-stop(1, #F58CCB));
    background-image: -webkit-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: radial-gradient(circle farthest-corner at left top, #F07E1A 0%, #F58CCB 100%);

    text-align: center;
    border: 3px solid white;
    color: white;
    font-weight: bold;
    border-radius:4px;
    display: none;
 }

上面的代码会在几秒钟后淡入和淡出。此外，淡入和淡出将发生在我在代码中提到的组件旁边

insertAfter($('#componentName'))

我的要求是：

警报消息应该出现在窗口的中心。就像普通的警报框一样
警报消息应该有一个确定按钮。就像普通的警报框一样。

我是否只能通过将 Okay 按钮添加到 div 并为 Okay 按钮添加行为来实现这一点。或者有什么方法可以扩展通用警报框行为并使用我上面提到的 css 属性对其进行自定义？如果是，如何实现？

【问题讨论】：

不，您不能使用 CSS 修改“本机”警报消息框的外观，因为那甚至不是 HTML。也许你想看看 jQuery UI Dialog？ jqueryui.com/dialog
他从未提到要修改内置警报消息，是吗？

标签： javascript jquery html css

【解决方案1】：

您需要自己实现外观和行为，标准警报框不可自定义。

您已经在使用 jQuery 的另一种方法是使用 jQueryUI 提供的功能。

【讨论】：

【解决方案2】：

我想，你可以使用 JQuery Dialog，请看下面的链接 http://jqueryui.com/dialog/#modal-message

【讨论】：

【解决方案3】：

你可以用你自己的代码试试这个。你不需要任何blugins。检查我的小提琴

http://jsfiddle.net/ponrajpaul/tNgkz/

HTML

<div class="alertMessage">
  alert message
  <input type="button" value="ok" class="ok" />
</div>

CSS

.alertMessage{
    width:100px;
    height:50px;
    background-image: -ms-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: -moz-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: -o-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #F07E1A), color-stop(1, #F58CCB));
    background-image: -webkit-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: radial-gradient(circle farthest-corner at left top, #F07E1A 0%, #F58CCB 100%);
    text-align: center;
    border: 3px solid white;
  }

脚本将中心定位到消息 div 的脚本

jQuery.fn.posCenter = function () {
    this.css("position","fixed");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
    return this;
}

用于调用警报消息 div 的脚本

$(document).ready(function(){
   $('.alertMessage').posCenter();
});

当您想显示警报消息时，只需调用此函数即可。在将 display:none 设置为警报消息之前。

$(document).ready(function(){
  $('.alertMessage').css({"display" : "block"});
  $('.alertMessage').posCenter();  
  $('input.ok').click(function(){
     $('.alertMessage').css({"display" : "none"});
  });
});

【讨论】：

【解决方案4】：

警报、确认等默认弹出窗口不可自定义...您需要使用

制作自己的 div

CSS

#yourPopupDiv {position : absolute}

并使用 jquery（或 javascript）添加此 CSS

$('#yourPopupDiv').css('top', $('body').height()/2 - $('#yourPopupDiv').height()/2);
$('#yourPopupDiv').css('left', $('body').width()/2 - $('#yourPopupDiv').width()/2);

或使用 jquery ui dialog 来完成所有这些操作..

【讨论】：