javascript - How to customise the css fields of an alert box? - Stack Overflow

admin管理员组

文章数量:1417414

My requirement is to customize the alert box with css attributes. Currently I am achieving something similar to that through the following code:

JQUERY:

$('<div class="alertMessage">Error first</div>')
.insertAfter($('#ponentName'))
.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;
 }

The above code will fadeIn and fadeOut after few seconds. Also the fade in and fade out will happen next to the ponent which I would have mentioned in code as

insertAfter($('#ponentName'))

My requirement is:

1. The alert message should e in the center of the window. Just like the normal alert box
2. The alert message should have an Okay button. Just like the normal alert box.

Will I be able to achieve this only by adding Okay button to the div and adding a behavior for the Okay button. Or is there any way to extend the generic alert box behaviour and customize it with the css properties which I have mentioned above? If Yes, How to achieve it?

My requirement is to customize the alert box with css attributes. Currently I am achieving something similar to that through the following code:

JQUERY:

$('<div class="alertMessage">Error first</div>')
.insertAfter($('#ponentName'))
.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;
 }

The above code will fadeIn and fadeOut after few seconds. Also the fade in and fade out will happen next to the ponent which I would have mentioned in code as

insertAfter($('#ponentName'))

My requirement is:

1. The alert message should e in the center of the window. Just like the normal alert box
2. The alert message should have an Okay button. Just like the normal alert box.

Will I be able to achieve this only by adding Okay button to the div and adding a behavior for the Okay button. Or is there any way to extend the generic alert box behaviour and customize it with the css properties which I have mentioned above? If Yes, How to achieve it?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 24, 2013 at 10:29 Antony 15.1k1010 gold badges4747 silver badges7676 bronze badges asked Jun 24, 2013 at 10:25 user2492958user2492958 2

• 3 No, you can not modify the look of the "native" alert message box with CSS, because that is not even HTML. Maybe you want to have a look at jQuery UI Dialog? jqueryui./dialog – C3roe Commented Jun 24, 2013 at 10:28
• he never mentioned to modify the built in alert message, did he? – Karl Adler Commented Jun 24, 2013 at 10:54

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You will need to implement the appearance and behaviour yourself, the standard alert box is not customizable.

An alternative as your already using jQuery is to use the functionality provided by jQueryUI.

I think, you can use JQuery Dialog, Please look the following link http://jqueryui./dialog/#modal-message

you can try this with your own code. You don't need any blugins. Check my fiddle

http://jsfiddle/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;
  }

SCRIPT script for position center to the message 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;
}

script for call the alert message div

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

whenever you want to display alert message just call this function. Before set display:none to alert message.

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

The default popups like alert,confirm are not customizable...u need to make your own div with

CSS

#yourPopupDiv {position : absolute}

and add this CSS using jquery(or javascript)

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

or use jquery ui dialog which does all these..

本文标签： javascriptHow to customise the css fields of an alert boxStack Overflow