Foundation6/Sites 显示模态不适用/现场示例
Foundation6/Sites Reveal Modal Not Working w/ live example
问题示例在这里：
http://liveweave.com/fRs3PL
基本上，我有一个从下拉菜单中触发的模态框，出于某种原因，模态框隐藏在灰色阴影后面，片刻之后完全消失。
这是怎么回事？！
您需要获取 revel 模态 (<div class="reveal">) 及其所有内容并将其放置为仅是 <body> 元素的子元素。您不希望它包含在其他元素中。
<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>
问题示例在这里： http://liveweave.com/fRs3PL
基本上，我有一个从下拉菜单中触发的模态框，出于某种原因，模态框隐藏在灰色阴影后面，片刻之后完全消失。
这是怎么回事？！
您需要获取 revel 模态 (<div class="reveal">) 及其所有内容并将其放置为仅是 <body> 元素的子元素。您不希望它包含在其他元素中。
<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>