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

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

HTMLDialogElement - Web API | MDN

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

HTMLDialogElement 接口提供操作<dialog> 元素的方法.。此接口的方法和属性继承自 HTMLElement 接口。

继承自父接口， HTMLElement。

继承自父接口， HTMLElement。

<!-- Anchor point example -->
<dialog id="bronteDialog">
  <p>That was part of a poem by Emily Brontë!</p>
</dialog>

<blockquote>
  <p>
    "Then art thou glad to seek repose?<br />
    Art glad to leave the sea,<br />
    And <strong id="anchor">anchor</strong> all thy weary woes<br />
    In calm Eternity?"
  </p>
</blockquote>

<menu>
  <button id="showDialogButton">Show dialog</button>
</menu>

<script>
  (function () {
    var showDialogButton = document.getElementById("showDialogButton");

    // 'Show dialog' button opens dialog, anchored at third line of quote
    showDialogButton.addEventListener("click", function () {
      var bronteDialog = document.getElementById("bronteDialog");
      var anchorPoint = document.getElementById("anchor");
      bronteDialog.show(anchorPoint);
    });
  })();
</script>

<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
  (function () {
    var updateButton = document.getElementById("updateDetails");
    var cancelButton = document.getElementById("cancel");

    // Update button opens a modal dialog
    updateButton.addEventListener("click", function () {
      document.getElementById("favDialog").showModal();
    });

    // Form cancel button closes the dialog box
    cancelButton.addEventListener("click", function () {
      document.getElementById("favDialog").close();
    });
  })();
</script>

• The HTML element implementing this interface: <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