Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีเปลี่ยน Label ปุ่มใน Confirm Box ด้วย JavaScript


เพื่อเปลี่ยน label ปุ่มใน confirm box ลองรันโค้ดต่อไปนี้ โค้ดใช้ JavaScript library jQuery และ CSS เพื่อสร้าง confirm box ที่มี label ปุ่มต่างจาก confirm box มาตรฐาน:

ตัวอย่าง

<!DOCTYPE html> <html>    <head>       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">       </script>       <script>          function functionConfirm(msg, myYes, myNo)          {             var confirmBox = $("#confirm");             confirmBox.find(".message").text(msg);             confirmBox.find(".yes,.no").unbind().click(function()             {               confirmBox.hide();             });             confirmBox.find(".yes").click(myYes);             confirmBox.find(".no").click(myNo);             confirmBox.show();          }       </script>       <style>          #confirm          {             display: none;             background-color: #91FF00;             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: 100px;             cursor: pointer;          }          #confirm .message          {             text-align: left;          }       </style>    </head>    <body>       <div id="confirm">          <div class="message"></div>          <button class="yes">Like!</button>          <button class="no">No, I Like Cricket!</button>       </div>       <button onclick = 'functionConfirm("Do you like Football?", function yes()       {          alert("Yes")       }, function no()       {          alert("no")       });'>submit</button>    </body> </html>