如何将“警报”用作“弹出窗口”[重复]答案

【问题标题】：How to use the 'alert' as a 'popup' [duplicate]如何将“警报”用作“弹出窗口”[重复]
【发布时间】：2015-11-17 18:19:06
【问题描述】：

我想用 css 样式设置这个警告框的样式吗？

【问题讨论】：

你不能。它是根据浏览器具有样式的模态窗口。
我同意。警报是浏览器的一部分，而不是 DOM 的一部分，因此 CSS 无法定位它。改为制作模式。
你应该是浏览器的开发者
作为替代方案，您可以使用 alertify.js [alertifyjs.com]，但您不能自己完成。
另一种方法是在 html/css 中创建该弹出窗口。然后你可以随心所欲地设计它。

标签： javascript css

【解决方案1】：

<!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>

【讨论】：