John's Blog

home info

Modal dialogs - Use modal dialogs to create pop-ups

Modal dialogs are pop-up windows which take control, blocking action in other windows until dismissed. They are commonly used for login windows and delete/save confirmation windows.

They aren't without their problems, though, so use with discretion. More about this here

  1. To open the modal dialog:
    <!-- Open the modal -->
    <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">
        Open Modal
  2. The modal dialog itself:
    <-- the modal itself -->
    <div id="id01" class="w3-modal">
        <div class="w3-modal-content">
            <header class="w3-container w3-teal">
                <span onclick="document.getElementById('id01').style.display='none'" class=
                "w3-button w3-display-topright">&times;</span>
                    Modal Header
            <div class="w3-container">
                    Some text..
                    Some text..
            <footer class="w3-container w3-teal">
                    Modal Footer

Note: this example uses W3CSS, q.v.

Author: JMP (Saturday 24th of July 2021 05:13:04 AM)


More simplification of the blog - enjoy!