当页面加载完成时，打开css弹出窗口 [英] open css popup when page loads completed

问题描述

我有纯CSS弹出这个流行作品onclick按钮，但是我需要在页面加载完成时弹出此div

 < div class =wrap> 
< a href =＃modal-oneclass =btn btn-big> Modal！< / a> 
< / div> 
<！ -  Modal  - > 
< div class =modalid =modal-onearia-hidden =true> 
< div class =modal-dialog> 
< div class =modal-header> 
< h2> Modal in CSS？< / h2> 
< a href =＃class =btn-closearia-hidden =true>×< / a> 
< / div> 
< div class =modal-body> 
< p>一个模态示例！ ：D< / p> 
< / div> 
< div class =modal-footer> 
< a href =＃class =btn>很好！< / a> 
< / div> 
< / div> 
< / div> 
  

Jsfiddle

当页面加载时，我需要自动弹出此窗口和第二个选项单击

可以帮助我

解决方案

一个选择是使用javascript并为新类添加额外的规则。 >

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' ）.removeClass（'loaded'）; 
}）; 
}）; 
  

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

只有css的解决方案是：target

$ b

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

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

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

can some one help me

解决方案

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');
    });
});

Fiddle: http://jsfiddle.net/ycc7anhy/2/

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%);
}

Fiddle: http://jsfiddle.net/ycc7anhy/7/

这篇关于当页面加载完成时，打开css弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！