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
    </button>
    
  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>
                <h2>
                    Modal Header
                </h2>
            </header>
            <div class="w3-container">
                <p>
                    Some text..
                </p>
                <p>
                    Some text..
                </p>
            </div>
            <footer class="w3-container w3-teal">
                <p>
                    Modal Footer
                </p>
            </footer>
        </div>
    </div>
    

Note: this example uses W3CSS, q.v.

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




News

More simplification of the blog - enjoy!