Question

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

我的代码是：

select count(*) ...

这是他们的示例：

 <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>

这是CSS：

<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>

但是，我不确定这是正确的应用程序还是如何使用此行：/* 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; }

任何帮助将不胜感激！

Answer 1

md-overlay只是全屏显示并覆盖页面的框，实际上是将内容涂成灰色。 md-modal是实际的模态，位于md-overlay的顶部。如果您有示例可以提供帮助，我已经使用了几次这些模态。

模态对模态弹出的影响

1 个答案: