модальные эффекты для модалпопуп - PullRequest
Новая
       20

модальные эффекты для модалпопуп

0 голосов
/ 10 сентября 2018

Я пытаюсь применить различные модальные эффекты к модалпопапу, как указано на следующем сайте: 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>

Любая помощьбыл бы очень признателен!

1 Ответ

0 голосов
/ 10 сентября 2018

md-overlay - это просто окно, которое отображается в полноэкранном режиме и закрывает страницу, по существу, выделяя содержимое. MD-модал является фактическим модальным и находится поверх MD-оверлея. Если у вас есть пример, который я могу помочь, я использовал эти модалы несколько раз.

...