css - modalpopup 的模态效果

Question

我正在尝试将不同的模态效果应用于以下站点中提到的模态弹出窗口: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 是实际的模式，位于 md-overlay 之上。如果您有我可以提供帮助的示例，我已经使用过这些模式几次。