How to use the 'alert' as a 'popup'

Question

I want to style this alert box using css style?

You can't. It is modal window that has styling according to the browser. — Maria Piaredryj, Aug 24 '15 at 10:46
I agree. The alert is part of the browser, not of the DOM, so CSS can't target it. Make a modal instead. — Jeremy Thille, Aug 24 '15 at 10:47
As an alternative you can use alertify.js [ http://alertifyjs.com/ ] but you can't do it by yourself. — Jen, Aug 24 '15 at 10:48
An alternative would be to create that pop-up in html/css instead. Then you can design it however you want to. — Niklas, Aug 24 '15 at 10:48
I would recommend you to use Bootstrap for that : http://www.w3schools.com/bootstrap/bootstrap_modal.asp — Juan Girini, Aug 24 '15 at 10:50
@PraveenKumar I don't like to make a off topic comment... but really wonder why is that? — Juan Girini, Aug 24 '15 at 10:55
Thanks everyone!. Now i know i am not able to do any css styling for an 'alert'. — Isuru, Aug 24 '15 at 10:56

score 1 · Answer 1 · edited Aug 24 '15 at 11:20

<!DOCTYPE html>  
 <html>  
 <head>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <title>jQuery Alert</title>  
   <style type="text/css">  
     /* applied to the alert */  
     .jqx-alert  
     {  
       position: absolute;  
       overflow: hidden;  
       z-index: 99999;  
       margin: 0;  
       padding: 0;  
     }  
     /*applied to the header */  
     .jqx-alert-header  
     {  
       outline: none;  
       border: 1px solid #999;  
       overflow: hidden;  
       padding: 5px;  
       height: auto;  
       white-space: nowrap;  
       overflow: hidden;  
       background-color:#E8E8E8; background-image:-webkit-gradient(linear,0 0,0 100%,from(#fafafa),to(#dadada)); background-image:-moz-linear-gradient(top,#fafafa,#dadada); background-image:-o-linear-gradient(top,#fafafa,#dadada);     
     }  
     /*applied to the content*/  
     .jqx-alert-content  
     {  
       outline: none;  
       overflow: auto;  
       text-align: left;  
       background-color: #fff;  
       padding: 5px;  
       border: 1px solid #999;  
       border-top: none;  
     }  
   </style>  
   <script type="text/javascript">  
     jqxAlert = {  
       // top offset.  
       top: 0,  
       // left offset.  
       left: 0,  
       // opacity of the overlay element.  
       overlayOpacity: 0.2,  
       // background of the overlay element.  
       overlayColor: '#ddd',  
       // display alert.  
       alert: function (message, title) {  
         if (title == null) title = 'Alert';  
         jqxAlert._show(title, message);  
       },  
       // initializes a new alert and displays it.  
       _show: function (title, msg) {  
         jqxAlert._hide();  
         jqxAlert._handleOverlay('show');  
         $("BODY").append(  
                      '<div class="jqx-alert" style="width: auto; height: auto; overflow: hidden; white-space: nowrap;" id="alert_container">' +  
                      '<div id="alert_title"></div>' +  
                      '<div id="alert_content">' +  
                        '<div id="message"></div>' +  
               '<input style="margin-top: 10px;" type="button" value="Ok" id="alert_button"/>' +  
                         '</div>' +  
                      '</div>');  
         $("#alert_title").text(title);  
         $("#alert_title").addClass('jqx-alert-header');  
         $("#alert_content").addClass('jqx-alert-content');  
         $("#message").text(msg);  
         $("#alert_button").width(70);  
         $("#alert_button").click(function () {  
           jqxAlert._hide();  
         });  
         jqxAlert._setPosition();  
       },  
       // hide alert.  
       _hide: function () {  
         $("#alert_container").remove();  
         jqxAlert._handleOverlay('hide');  
       },  
       // initialize the overlay element.   
       _handleOverlay: function (status) {  
         switch (status) {  
           case 'show':  
             jqxAlert._handleOverlay('hide');  
             $("BODY").append('<div id="alert_overlay"></div>');  
             $("#alert_overlay").css({  
               position: 'absolute',  
               zIndex: 99998,  
               top: '0px',  
               left: '0px',  
               width: '100%',  
               height: $(document).height(),  
               background: jqxAlert.overlayColor,  
               opacity: jqxAlert.overlayOpacity  
             });  
             break;  
           case 'hide':  
             $("#alert_overlay").remove();  
             break;  
         }  
       },  
       // sets the alert's position.  
       _setPosition: function () {  
         // center screen with offset.  
         var top = (($(window).height() / 2) - ($("#alert_container").outerHeight() / 2)) + jqxAlert.top;  
         var left = (($(window).width() / 2) - ($("#alert_container").outerWidth() / 2)) + jqxAlert.left;  
         if (top < 0) {  
           top = 0;  
         }  
         if (left < 0) {  
           left = 0;  
         }  
         // set position.  
         $("#alert_container").css({  
           top: top + 'px',  
           left: left + 'px'  
         });  
         // update overlay.  
         $("#alert_overlay").height($(document).height());  
       }  
     }  
   </script>  
   <script type="text/javascript">  
     $(document).ready(function () {  
       jqxAlert.alert('Alert Message');  
     })  
   </script>  
 </head>  
 <body>  
 </body>  
 </html>

How to use the 'alert' as a 'popup'

1 Answers1