modal effects to modalpopup

Question

I am attempting to apply different modal effects to a modalpopup as mentioned in the following site: https://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

My code is:

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

This is their example:

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

This is the 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;
}

However, I am not sure this is the correct application or how to use this line: <div class="md-overlay"></div>

Any help would be greatly appreciated!

Answer 1

md-overlay is just the box that goes fullscreen and covers up the page, essentially graying out the content. md-modal is the actual modal and sits on top of md-overlay. If you have an example I can help, I've used these modals a few times.