页面加载完成时打开 css 弹出窗口

2022-01-20 00:00:00 popup html css

我有 pure css popup 这个 pop 可以在点击按钮上工作，但是我需要在页面加载完成时弹出这个 div

I have pure css popup this pop works onclick button but i need to pop this div when page load is completed

<div class="wrap">
        <a href="#modal-one" class="btn btn-big">Modal!</a>
    </div>
    <!-- Modal -->
    <div class="modal" id="modal-one" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-header">
                <h2>Modal in CSS?</h2>
                <a href="#" class="btn-close" aria-hidden="true">×</a>
            </div>
            <div class="modal-body">
                <p>One modal example here! :D</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn">Nice!</a>
            </div>
        </div>
    </div>

Jsfiddle

当页面加载时，我需要自动弹出这个窗口，然后点击第二个选项

Jsfiddle

when page is loaded i need to pop this window automatically and 2nd option by click

谁能帮帮我

推荐答案

一种选择是使用 javascript 并为新类添加额外的规则.

One option is to use javascript and add the extra rules for new class.

CSS:

.modal:target:before, .modal.loaded:before { ... }
.modal:target .modal-dialog, .modal.loaded .modal-dialog { ... }

Js:

$( document ).ready( function() {
    $('.modal').addClass('loaded');
    $('.btn-close, .btn').click( function() {
        $('.modal').removeClass('loaded');
    });
});

小提琴:http://jsfiddle.net/ycc7anhy/2/

唯一的 css 解决方案是 :target url 用于关闭弹出窗口.

A css only solution is to :target url for closing popup.

.modal:target:before {
    display: none;
}
.modal:before {
    content:"";
    display: block;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.modal .modal-dialog {
    background: #fefefe;
    border: #333333 solid 1px;
    border-radius: 5px;
    margin-left: -200px;
    position: fixed;
    left: 50%;
    z-index: 11;
    width: 360px;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    top: 20%;
}
.modal:target .modal-dialog {
    top: -100%;
    -webkit-transform: translate(0, -500%);
    -ms-transform: translate(0, -500%);
    transform: translate(0, -500%);
}

小提琴:http://jsfiddle.net/ycc7anhy/7/

相关文章