Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/HTMLDialogElement below:

HTMLDialogElement - Web API | MDN

HTMLDialogElement インターフェイスは <dialog> 要素を操作するメソッドを提供します。 HTMLElement インターフェイスからプロパティとメソッドを継承しています。

親である HTMLElement から継承したプロパティがあります。

HTMLDialogElement.open

論理値で、ダイアログが操作可能であることを示す open 属性の値を反映します。

HTMLDialogElement.returnValue

文字列で、ダイアログの返値を設定または返却します。

親である HTMLElement から継承したメソッドがあります。

HTMLDialogElement.close()

ダイアログを閉じます。任意で引数として文字列を渡すことができ、これがダイアログの returnValue を更新します。

HTMLDialogElement.show()

ダイアログをモードレスで開きます。すなわち、その間にダイアログの外のコンテンツが操作できます。

HTMLDialogElement.showModal()

ダイアログをモーダルで、他のダイアログがあればその最も上に表示します。ダイアログの外の操作はブロックされます。ダイアログの外はすべて inert となり、ダイアログの外の操作はブロックされます。

親インターフェイスである HTMLElement から継承したイベントがあります。

これらのイベントを addEventListener() を使用して、またはこのインターフェイスの onイベント名 プロパティにイベントリスナーを代入することによって待ち受けます。

close

エスケープキー、HTMLDialogElement.close() メソッド、または method="dialog" でダイアログ内のフォームを送信することによって、このダイアログが閉じられたときに発行されます。

以下の例はボタンを表示し、クリックすると、フォームの入ったモーダルダイアログ (<dialog>) を HTMLDialogElement.showModal() 関数によって開きます。そこから Cancel ボタンを押して (HTMLDialogElement.close() 関数で) ダイアログを閉じるか、送信ボタンでフォームを送信するかします。Cancel ボタンを選択すると、close イベントを生成します。cancel イベントではありません。

<!-- フォームが入ったポップアップダイアログボックス -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label for="favAnimal">好きな動物:</label>
      <select id="favAnimal" name="favAnimal">
        <option></option>
        <option>アルテミア</option>
        <option>レッサーパンダ</option>
        <option>クモザル</option>
      </select>
    </p>
    <div>
      <button id="cancel" type="reset">キャンセル</button>
      <button type="submit">確認</button>
    </div>
  </form>
</dialog>

<div>
  <button id="updateDetails">詳細を更新</button>
</div>

const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";

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

// 更新ボタンを押すとモーダルダイアログが開く
updateButton.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

// ダイアログボックスを閉じるフォームキャンセルボタン
cancelButton.addEventListener("click", () => {
  dialog.close("animalNotChosen");
  openCheck(dialog);
});

• このインターフェイスを実装している HTML 要素: <dialog>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4