modalpopup的模态效果

Question

我正在尝试将不同的模式效果应用于以下站点中提到的modalpopup：https://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

我的代码是：

 <div class="md-modal md-effect-1" id="modal-1">
                    <div class="md-content">
                        <asp:Panel ID="pnlComment" runat="server" Width="550px" Height="450px" Style="display: none;">
                            <table border="1" class="commentTable" style="border-collapse: separate; border-spacing: 10px; width: 100%; height: 100%">
                                <tr>
                                    <th style="width: 100%">
                                        <asp:Label ID="lblComments" runat="server" Text="Comments" Font-Size="Medium"></asp:Label></th>
                                </tr>
                                <tr>
                                    <td style="width: 100%">
                                        <asp:TextBox ID="txtExistingComments" runat="server" TextMode="MultiLine" ReadOnly="True" Width="100%" Rows="7" Font-Names="Trebuchet MS"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <th style="width: 100%">
                                        <asp:Label ID="lblNewComment" runat="server" Text="Add Comment" Font-Size="Medium"></asp:Label></th>
                                </tr>
                                <tr>
                                    <td style="width: 100%">
                                        <asp:TextBox ID="txtNewComments" runat="server" TextMode="MultiLine" ReadOnly="False" Width="100%" Rows="7" Font-Names="Trebuchet MS"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td style="width: 100%">
                                        <asp:Button ID="bttnSave" runat="server" Width="100px" Text="Save" OnClick="bttnSave_Click" />&nbsp&nbsp;
                                <asp:Button ID="bttnCancel" runat="server" Width="100px" Text="Cancel" /></td>
                                </tr>
                            </table>
                        </asp:Panel>
                        <cc1:ModalPopupExtender ID="modal" runat="server" TargetControlID="bttnHidden" PopupControlID="pnlComment" CancelControlID="bttnCancel"></cc1:ModalPopupExtender>
                    </div>
                </div>

这是他们的例子：

<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> Modal windows will probably tell you something important so don't forget to read what it says.</li>
                <li><strong>Look:</strong> modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="md-close">Close me!</button>
        </div>
    </div>
</div>

这是CSS：

/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

但是，我不确定这是正确的应用程序，也不确定如何使用这一行：<div class="md-overlay"></div>

任何帮助都将不胜感激！

Answer 1

md-overlay就是一个全屏覆盖页面的方框，本质上是灰显内容。md-modal是实际的modal，位于md-overlay之上。如果你有一个我可以帮助的例子，我已经用过这些情态动词好几次了。