Popup boxes ใน JavaScript

JavaScrip มี popup ให้เลือกใช้ได้ 3 แบบ คือ alert prompt และ confirm

popup เหล่านี้สามารถถูกใช้ได้ใน JavaScript browser แต่มันไม่ใช่ภาษา JavaScript มันมาจาก browser

Alert Box

Alert box ใช้เมื่อต้องการให้ผู้ใช้งานได้รับข้อมูลใดๆอย่างแน่นอน โดยการนำข้อมูลนั้นใส่ popup และผู้ใช้ต้องกด OK เท่านั้นจึงจะสามารถใช้งานเพจต่อได้

ตัวอย่าง

<button onclick="funcAlert()">Alert Box</button>
  <script>function funcAlert() {
      alert("I'm Sunny Cradle, the cat!");
  }</script>

Prompt Box

Prompt Box จะต้องได้รับ input จากผู้ใช้ เมื่อ prompt box แสดงบนหน้าเว็บเพจ ผู้ใช้จะต้องใส่ input จากนั้นกดเลือก OK หรือ Cancel เพื่อใช้งานเพจต่อไป

หากผู้ใช้กด OK จะต้อง return ค่า input

หากผู้ใช้กด Cancel จะ return ด้วย null แทน

ตัวอย่าง (สร้างฟังก์ชั่น funcPrompt() และสร้างเงื่อนไขให้แสดงข้อความหากได้ค่า null หรือผู้ใช้ไม่ใส่ input แต่กดตกลง)

<button onclick="funcPrompt()">Prompt Box</button>
  <p id="greet"></p>
  <script>function funcPrompt() {
      var greeting;
      var user = prompt("Please type your name here:", "John Doe");
      if (user == null || user == "") {
          greeting = "You didn't type your name.";
      } else {
          greeting = `Hello ${user}! How are you doing?`;
      }
      document.getElementById("greet").innerHTML = greeting;
  }</script>

• 

• 

• 

Confirm Box

Confirm Box ใช้เมื่อต้องการให้ผู้ใช้งานยืนยันหรือยอมรับบางสิ่งบางอย่าง

หากผู้ใช้งานยืนยัน/ยอมรับ ต้องกดเลือก OK และค่าของ popup box จะ return เป็น true หากไม่ยอมรับ/ไม่ตกลง ต้องกด Cancel ซึ่งทำให้ return ของ popup box มีค่าเป็น false

ตัวอย่าง

<button onclick="funcConfirm()">Confirm Box</button>
  <p id="text"></p>
  <script>function funcConfirm() {
      var txt;
      if (confirm("Choose OK or cancel.")) {
          txt = "You choose OK!";
      } else {
          txt = "You cancel it!";
      }
      document.getElementById("text").innerHTML = txt;
  }</script>

• 

• 

• 

อย่าใช้ popup box บ่อยเกินไป เพราะมันจะปิดกั้นไม่ให้ผู้ใช้เข้าส่วนอื่นๆของเพจจนกว่า popup box จะถูกปิด