Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm thế nào để hiển thị hình ảnh trong hộp cảnh báo bằng JavaScript?


Để hiển thị hình ảnh trong hộp cảnh báo, hãy thử chạy mã sau. Tại đây, một hình ảnh cảnh báo được thêm vào hộp cảnh báo tùy chỉnh -

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/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: #FFFFFF;
            border: 1px solid #aaa;
            position: fixed;
            width: 250px;
            left: 50%;
            margin-left: -100px;
            padding: 6px 8px 8px;
            box-sizing: border-box;
            text-align: center;
         }
         #confirm button {
            background-color: #48E5DA;
            display: inline-block;
            border-radius: 5px;
            border: 1px solid #aaa;
            padding: 5px;
            text-align: center;
            width: 80px;
            cursor: pointer;
         }
         #confirm .message {
            text-align: left;
         }
      </style>
   </head>
   <body>
      <div id="confirm">
         <div class="message">This is a warning message.</div>
         <button class="yes">OK</button>
         <img src = "https://encrypted-tbn0.gstatic.com/images?q=
                     tbn:ANd9GcSNjyHBjM74KLxvROpx34zsT4zPzMWHMHz4zzJwAtemXGglsjtA"
                      width="120" height="70"/>
      </div>
      <input type="button" value="Click Me" onclick="functionAlert();" />
   </body>
</html>