css - 如何在不单击激活它的链接的情况下始终显示纯 HTML5/CSS 模式窗口？

Question

我在 Razor View 中有一个纯 HTML5/CSS 模态窗口 UserPanel在 ASP.NET MVC 应用程序中。我可以通过单击链接激活此模式窗口:<p><a href="#modal" class="btn go">Activate Modal</a></p>问题是我希望在访问 /UserPanel 时始终显示它页面，而不必单击此按钮。

模态的短 html，然后是完整的 css(有效 -> 模态仅在单击按钮后显示):

html:

<div class="container">
    <p><a href="#modal" class="btn go">Activate Modal</a></p>
</div>

<div id="modal">
    <div class="modal-content">
        <div class="header">
            <h2>Notification</h2>
        </div>
        <div class="copy">
            <p>There is new Announcment to read!</p>
        </div>
        <div class="cf footer">
            <a href="#" class="btn">Close</a>
        </div>
    </div>
    <div class="overlay"></div>
</div>

CSS:

<style>
    #modal {
        left: 50%;
        margin: -250px 0 0 -40%;
        opacity: 0;
        position: absolute;
        top: -50%;
        visibility: hidden;
        width: 80%;
        box-shadow: 0 3px 7px rgba(0,0,0,.25);
        box-sizing: border-box;
        transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;
    }

        #modal:target {
            opacity: 1;
            top: 50%;
            visibility: visible;
        }

        #modal .header, #modal .footer {
            border-bottom: 1px solid #e7e7e7;
            border-radius: 5px 5px 0 0;
        }

        #modal .footer {
            border: none;
            border-top: 1px solid #e7e7e7;
            border-radius: 0 0 5px 5px;
        }

        #modal h2 {
            margin: 0;
        }

        #modal .btn {
            float: right;
        }

        #modal .copy, #modal .header, #modal .footer {
            padding: 15px;
        }

    .modal-content {
        background: #f7f7f7;
        position: relative;
        z-index: 20;
        border-radius: 5px;
    }

    #modal .copy {
        background: #fff;
    }

    #modal .overlay {
        background-color: #000;
        background: rgba(0,0,0,.5);
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
    }
</style>

问题:如何在访问该页面时始终显示模态？

Answer 1

将您的 HTML 更改为此(我们只针对关闭按钮):

<div id="modal">
    <div class="modal-content">
        <div class="header">
            <h2>Notification</h2>
        </div>
        <div class="copy">
            <p>There is new Announcment to read!</p>
        </div>
        <div class="cf footer">
            <a href="#modal" class="btn">Close</a>
        </div>
    </div>
    <div class="overlay"></div>
</div>

现在是 CSS:

 #modal {
        left: 50%;
        margin: -250px 0 0 -40%;
        opacity: 1;
        position: absolute;
        top: 50%;
        visibility: visible;
        width: 80%;
        box-shadow: 0 3px 7px rgba(0,0,0,.25);
        box-sizing: border-box;
        transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;
    }

        #modal:target{
            opacity: 0;
            top: -50%;
            visibility: hidden;
        }

        #modal .header, #modal .footer {
            border-bottom: 1px solid #e7e7e7;
            border-radius: 5px 5px 0 0;
        }

        #modal .footer {
            border: none;
            border-top: 1px solid #e7e7e7;
            border-radius: 0 0 5px 5px;
        }

        #modal h2 {
            margin: 0;
        }

        #modal .btn {
            float: right;
        }

        #modal .copy, #modal .header, #modal .footer {
            padding: 15px;
        }

    .modal-content {
        background: #f7f7f7;
        position: relative;
        z-index: 20;
        border-radius: 5px;
    }

    #modal .copy {
        background: #fff;
    }

    #modal .overlay {
        background-color: #000;
        background: rgba(0,0,0,.5);
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
    }

我们只是让模态默认显示，然后在点击时隐藏它。当然，如果你希望它一直可见，只需删除关闭按钮即可。 See fiddle here