Đóng hộp thoại phương thức trên nút bấm javascript

Question

Bạn có thể ngăn việc đóng hộp thoại phương thức bằng cách đặt giá trị hủy đối số sự kiện beforeClose thành true. Trong ví dụ sau, hộp thoại sẽ đóng khi bạn nhập giá trị tên người dùng với tối thiểu 4 ký tự. Nếu không, nó sẽ không được đóng lại

Nội dung chính Show

Thông số
Giá trị trả về
Làm cách nào để đóng hộp thoại phương thức trong JavaScript?
Làm cách nào để đóng cửa sổ bật lên khi nhấp vào nút bằng JavaScript?





            
    Essential JS 2 Dialog
    
    
    
    
    
    
    
    
    
    
    
    



    LOADING....
    
        Open Dialog
        
        

            

              

                
                
                Username
              
            
            
                

                    
                    
                    Password

Vui lòng cung cấp thêm thông tin

Cảm ơn bạn đã phản hồi và nhận xét của bạn. Chúng tôi sẽ khắc phục điều này càng sớm càng tốt

Phương thức close() của giao diện HTMLDialogElement đóng giao diện

. Một chuỗi tùy chọn có thể được truyền dưới dạng đối số, cập nhật

close()
close(returnValue)

0 của hộp thoại

cú pháp

close()
close(returnValue)

Thông số

close()
close(returnValue)

0 Tùy chọn

Một chuỗi biểu thị giá trị được cập nhật cho

close()
close(returnValue)

2 của hộp thoại

Giá trị trả về

Không có (

close()
close(returnValue)

3)

ví dụ

Ví dụ sau đây cho thấy một nút đơn giản, khi được nhấp vào, sẽ mở ra một

chứa một biểu mẫu thông qua phương thức


<dialog id="favDialog">
  <form method="dialog">
    <button id="close" aria-label="close" novalidate>Xbutton>
    <section>
      <p>
        <label for="favAnimal">Favorite animal:label>
        <select id="favAnimal" name="favAnimal">
          <option>option>
          <option>Brine shrimpoption>
          <option>Red pandaoption>
          <option>Spider monkeyoption>
        select>
      p>
    section>
    <menu>
      <button type="reset">Resetbutton>
      <button type="submit">Confirmbutton>
    menu>
  form>
dialog>

<menu>
  <button id="updateDetails">Update detailsbutton>
menu>

<script>
  (() => {
    const updateButton = document.getElementById("updateDetails");
    const closeButton = document.getElementById("close");
    const dialog = document.getElementById("favDialog");
    dialog.returnValue = "favAnimal";

    function openCheck(dialog) {
      if (dialog.open) {
        console.log("Dialog open");
      } else {
        console.log("Dialog closed");
      }
    }

    // Update button opens a modal dialog
    updateButton.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
    });

    // Form close button closes the dialog box
    closeButton.addEventListener("click", () => {
      dialog.close("animalNotChosen");
      openCheck(dialog);
    });
  })();
script>

0. Từ đó, bạn có thể nhấp vào nút X để đóng hộp thoại (thông qua phương pháp


<dialog id="favDialog">
  <form method="dialog">
    <button id="close" aria-label="close" novalidate>Xbutton>
    <section>
      <p>
        <label for="favAnimal">Favorite animal:label>
        <select id="favAnimal" name="favAnimal">
          <option>option>
          <option>Brine shrimpoption>
          <option>Red pandaoption>
          <option>Spider monkeyoption>
        select>
      p>
    section>
    <menu>
      <button type="reset">Resetbutton>
      <button type="submit">Confirmbutton>
    menu>
  form>
dialog>

<menu>
  <button id="updateDetails">Update detailsbutton>
menu>

<script>
  (() => {
    const updateButton = document.getElementById("updateDetails");
    const closeButton = document.getElementById("close");
    const dialog = document.getElementById("favDialog");
    dialog.returnValue = "favAnimal";

    function openCheck(dialog) {
      if (dialog.open) {
        console.log("Dialog open");
      } else {
        console.log("Dialog closed");
      }
    }

    // Update button opens a modal dialog
    updateButton.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
    });

    // Form close button closes the dialog box
    closeButton.addEventListener("click", () => {
      dialog.close("animalNotChosen");
      openCheck(dialog);
    });
  })();
script>

1) hoặc gửi biểu mẫu qua nút gửi


<dialog id="favDialog">
  <form method="dialog">
    <button id="close" aria-label="close" novalidate>Xbutton>
    <section>
      <p>
        <label for="favAnimal">Favorite animal:label>
        <select id="favAnimal" name="favAnimal">
          <option>option>
          <option>Brine shrimpoption>
          <option>Red pandaoption>
          <option>Spider monkeyoption>
        select>
      p>
    section>
    <menu>
      <button type="reset">Resetbutton>
      <button type="submit">Confirmbutton>
    menu>
  form>
dialog>

<menu>
  <button id="updateDetails">Update detailsbutton>
menu>

<script>
  (() => {
    const updateButton = document.getElementById("updateDetails");
    const closeButton = document.getElementById("close");
    const dialog = document.getElementById("favDialog");
    dialog.returnValue = "favAnimal";

    function openCheck(dialog) {
      if (dialog.open) {
        console.log("Dialog open");
      } else {
        console.log("Dialog closed");
      }
    }

    // Update button opens a modal dialog
    updateButton.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
    });

    // Form close button closes the dialog box
    closeButton.addEventListener("click", () => {
      dialog.close("animalNotChosen");
      openCheck(dialog);
    });
  })();
script>

Nếu nút "X" là của


<dialog id="favDialog">
  <form method="dialog">
    <button id="close" aria-label="close" novalidate>Xbutton>
    <section>
      <p>
        <label for="favAnimal">Favorite animal:label>
        <select id="favAnimal" name="favAnimal">
          <option>option>
          <option>Brine shrimpoption>
          <option>Red pandaoption>
          <option>Spider monkeyoption>
        select>
      p>
    section>
    <menu>
      <button type="reset">Resetbutton>
      <button type="submit">Confirmbutton>
    menu>
  form>
dialog>

<menu>
  <button id="updateDetails">Update detailsbutton>
menu>

<script>
  (() => {
    const updateButton = document.getElementById("updateDetails");
    const closeButton = document.getElementById("close");
    const dialog = document.getElementById("favDialog");
    dialog.returnValue = "favAnimal";

    function openCheck(dialog) {
      if (dialog.open) {
        console.log("Dialog open");
      } else {
        console.log("Dialog closed");
      }
    }

    // Update button opens a modal dialog
    updateButton.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
    });

    // Form close button closes the dialog box
    closeButton.addEventListener("click", () => {
      dialog.close("animalNotChosen");
      openCheck(dialog);
    });
  })();
script>

2, hộp thoại sẽ đóng mà không yêu cầu JavaScript. Việc gửi biểu mẫu sẽ đóng mà nó được lồng vào bên trong nếu phương thức của biểu mẫu là


<dialog id="favDialog">
  <form method="dialog">
    <button id="close" aria-label="close" novalidate>Xbutton>
    <section>
      <p>
        <label for="favAnimal">Favorite animal:label>
        <select id="favAnimal" name="favAnimal">
          <option>option>
          <option>Brine shrimpoption>
          <option>Red pandaoption>
          <option>Spider monkeyoption>
        select>
      p>
    section>
    <menu>
      <button type="reset">Resetbutton>
      <button type="submit">Confirmbutton>
    menu>
  form>
dialog>

<menu>
  <button id="updateDetails">Update detailsbutton>
menu>

<script>
  (() => {
    const updateButton = document.getElementById("updateDetails");
    const closeButton = document.getElementById("close");
    const dialog = document.getElementById("favDialog");
    dialog.returnValue = "favAnimal";

    function openCheck(dialog) {
      if (dialog.open) {
        console.log("Dialog open");
      } else {
        console.log("Dialog closed");
      }
    }

    // Update button opens a modal dialog
    updateButton.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
    });

    // Form close button closes the dialog box
    closeButton.addEventListener("click", () => {
      dialog.close("animalNotChosen");
      openCheck(dialog);
    });
  })();
script>

4, vì vậy không cần nút "đóng"

Làm cách nào để đóng hộp thoại phương thức trong JavaScript?

Phương thức đóng() hộp thoại .

Làm cách nào để đóng cửa sổ bật lên khi nhấp vào nút bằng JavaScript?

JavaScript cung cấp một chức năng dựng sẵn có tên close() để đóng cửa sổ trình duyệt được mở bằng cách sử dụng cửa sổ. phương thức mở ()

programming javascript

Đóng hộp thoại phương thức trên nút bấm javascript

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội