如何创建 CSS 并将其应用于 JavaScript 警报框?

 JavaScript 中的标准警告框不提供应用 CSS 的选项。要设置警报框的样式,您需要先创建一个自定义框。自定义警告框将使用 jQuery 创建,样式将应用于 CSS。

示例

您可以尝试运行以下代码以了解如何创建 CSS 并将其应用于警报框 -

<!DOCTYPE html>

<html>

   <head>

      <script xx_src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

      <script>

         function functionAlert(msg, myYes) {

            var confirmBox = $("#confirm");

            confirmBox.find(".message").text(msg);

            confirmBox.find(".yes").unbind().click(function() {

               confirmBox.hide();

            });

            confirmBox.find(".yes").click(myYes);

            confirmBox.show();

         }

      </script>

      <style>

         #confirm {

            display: none;

            background-color: #F3F5F6;

            color: #000000;

            border: 1px solid #aaa;

            position: fixed;

            width: 300px;

            height: 100px;

            left: 40%;

            top: 40%;

            box-sizing: border-box;

            text-align: center;

         }

         #confirm button {

            background-color: #FFFFFF;

            display: inline-block;

            border-radius: 12px;

            border: 4px solid #aaa;

            padding: 5px;

            text-align: center;

            width: 60px;

            cursor: pointer;

         }

         #confirm .message {

            text-align: left;

         }

      </style>

   </head>

   <body>

      <div id="confirm">

         <div class="message">This is a warning message.</div><br>

         <button class="yes">OK</button>

      </div>

      <input type="button" value="Click Me" onclick="functionAlert();" />

   </body>

 </html>

以上是 如何创建 CSS 并将其应用于 JavaScript 警报框? 的全部内容, 来源链接: utcz.com/z/360921.html

回到顶部