zurb foundation - Foundation6/Sites Reveal Modal Not Working w/ live example -


example of problem here: http://liveweave.com/frs3pl

basically, have modal being triggered dropdown, , reason modal hides behind grey shadow , disappears altogether moment later.

what going on here?!

you need take revel modal (<div class="reveal">) , of contents , place child of <body> element. don't want 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 changing 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> 

Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -