0

Example of problem is here: http://liveweave.com/fRs3PL

Basically, I have a modal being triggered from a dropdown, and for some reason the modal hides behind the grey shadow and then disappears altogether a moment later.

What is going on here?!

Colin Marshall
  • 2,142
  • 2
  • 21
  • 31
Morgan
  • 196
  • 9

1 Answers1

1

You need to take the revel modal (<div class="reveal">) and all of its contents and place it so that it is a child of only the <body> element. You don't want it to be contained inside of other elements.

<body>

  <div class="row">
    <div class="small-12 medium-3 columns">

      <ul class="dropdown menu" data-dropdown-menu="" role="menubar" data-dropdownmenu="3z4e20-dropdownmenu" aria-selected="false" aria-expanded="false" data-is-click="false">

        <li role="menuitem" class="has-submenu is-dropdown-submenu-parent is-down-arrow" aria-haspopup="true" aria-selected="false" aria-expanded="false" aria-label="Actions" data-is-click="false">

          <a href="#" tabindex="0">Actions</a>
          <ul class="menu submenu is-dropdown-submenu first-sub vertical" data-submenu="" aria-hidden="true" role="menu">
            <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a data-open="change-password-modal-0" aria-controls="change-password-modal-0" id="8p079l-reveal" aria-haspopup="true" tabindex="0">Change Password</a>  
            </li>
            <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="#">Disable</a></li>
            <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="#">Delete</a></li>
            <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="#">Transfer</a></li>
          </ul>

        </li>
      </ul>

    </div>
  </div>

  <div class="reveal" id="change-password-modal-0" data-reveal="rcsjob-reveal" data-reset-on-close="true" aria-labelledby="8p079l-reveal" role="dialog" aria-hidden="true" data-yeti-box="change-password-modal-0" data-resize="change-password-modal-0">

    <h1>Change Password</h1>
    <p class="lead">You are changing the password for:</p>
    <label>Password: <input type="text"></label>
    <button class="close-button" data-close="" aria-label="Close reveal" type="button">
      <span aria-hidden="true">×</span>
    </button>

  </div>

</body>
Colin Marshall
  • 2,142
  • 2
  • 21
  • 31
  • In case anyone runs into this, I didn't have to move the reveal to be a direct descendant of the body, but instead inside a #container div, but the answer was correct nonetheless. Thanks Colin! – Morgan Jan 07 '16 at 16:30