More Modal Stuff

The examples are on the opriginal page, I can add extra examples.

Where I have used the W3.CSS Modal class

The modal class is used in the mock-up for an eCommerce interface for the "Friends" group. This is on-going..............

A modal was used to display the selected product as a FORM that is displayed when the appropriate button is clicked.

<button class="w3-button w3-black w3-small" onclick="document.getElementById('id01').style.display='block'">Buy Now</button>

The form is initally hidden in the definition of the form

<button onclick="document.getElementById('id01').style.display='none'" ..........

THIS IS NOT OBVIOUS. It took me a while to see what was going on. This was not helped by the example I was copying from haveing an opaque container which filled the screen. (the nature of a modal is that it sits on top of the current screen and the content below can still be seen, and scrolled). My first page on the W3 Modal has this (shows this) explained a little better.

The code for the Log-on example

  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-green w3-large">Login</button>
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:600px">
      <div class="w3-center"><br>
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">×
        <img src="images/bw_logo_1.png" alt="Avatar" style="width:30%" class="w3-circle w3-margin-top">
      <div>
      <form class="w3-container" action="/action_page.php">
        <div class="w3-section">
          <label><b>Username</b></label>
          <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Enter Username" name="usrname" required>
          <label><b>Password</b></label>
          <input class="w3-input w3-border" type="password" placeholder="Enter Password" name="psw" required>
          <button class="w3-button w3-block w3-green w3-section w3-padding" type="submit">Login
          <input class="w3-check w3-margin-top" type="checkbox" checked="checked"> Remember me
        </div>
      </form>
      <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
        <button onclick="document.getElementById('id01').style.display='none'" type="button" class="w3-button w3-red">Cancel
        <span class="w3-right w3-padding w3-hide-small">Forgot password?
      </div>
    </div>
  </div>
</div>