プラグインなしのWordpressポップアップ

Question

プラグインなしでWordpressで簡単にポップアップを作成するにはどうすればよいですか？このポップアップは、最初のサイト訪問時にのみ表示されます。任意のアイデア、仲間？たぶん

Answer 1

この：footer.phpで

<a href="https://codepen.io/andrearufo/pen/dyKJG">codepen example</a> 

Htmlの一部、main.js内のstyle.cssとjsの一部でCSSの部分と、それはそれです。今、あなたはあなたのテンプレートにポップアップを表示したい、このコードを貼り付けhttp://www.jqueryscript.net/lightbox/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions.html

ここから

Answer 2

まずダウンロードのポップアップ

<style> 
html { 
    font-family: "roboto", helvetica; 
    position: relative; 
    height: 100%; 
    font-size: 100%; 
    line-height: 1.5; 
    color: #444; 
} 

h2 { 
    margin: 1.75em 0 0; 
    font-size: 5vw; 
} 

h3 { font-size: 1.3em; } 

.v-center { 
    height: 100vh; 
    width: 100%; 
    display: table; 
    position: relative; 
    text-align: center; 
} 

.v-center > div { 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
    top: -10%; 
} 

.btn { 
    font-size: 3vmin; 
    padding: 0.75em 1.5em; 
    background-color: #fff; 
    border: 1px solid #bbb; 
    color: #333; 
    text-decoration: none; 
    display: inline; 
    border-radius: 4px; 
    -webkit-transition: background-color 1s ease; 
    -moz-transition: background-color 1s ease; 
    transition: background-color 1s ease; 
} 

.btn:hover { 
    background-color: #ddd; 
    -webkit-transition: background-color 1s ease; 
    -moz-transition: background-color 1s ease; 
    transition: background-color 1s ease; 
} 

.btn-small { 
    padding: .75em 1em; 
    font-size: 0.8em; 
} 

.modal-box { 
    display: none; 
    position: absolute; 
    z-index: 1000; 
    width: 98%; 
    background: white; 
    border-bottom: 1px solid #aaa; 
    border-radius: 4px; 
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    background-clip: padding-box; 
} 
@media (min-width: 32em) { 

.modal-box { width: 70%; } 
} 

.modal-box header, 
.modal-box .modal-header { 
    padding: 1.25em 1.5em; 
    border-bottom: 1px solid #ddd; 
} 

.modal-box header h3, 
.modal-box header h4, 
.modal-box .modal-header h3, 
.modal-box .modal-header h4 { margin: 0; } 

.modal-box .modal-body { padding: 2em 1.5em; } 

.modal-box footer, 
.modal-box .modal-footer { 
    padding: 1em; 
    border-top: 1px solid #ddd; 
    background: rgba(0, 0, 0, 0.02); 
    text-align: right; 
} 

.modal-overlay { 
    opacity: 0; 
    filter: alpha(opacity=0); 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 900; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.3) !important; 
} 

a.close { 
    line-height: 1; 
    font-size: 1.5em; 
    position: absolute; 
    top: 5%; 
    right: 2%; 
    text-decoration: none; 
    color: #bbb; 
} 

a.close:hover { 
    color: #222; 
    -webkit-transition: color 1s ease; 
    -moz-transition: color 1s ease; 
    transition: color 1s ease; 
} 
</style> 



<section class="v-center"> 
    <div> 
    <a class="js-open-modal btn" href="#" data-modal-id="popup1"> Pop Up One</a> </div> 
</section> 
<div id="popup1" class="modal-box"> 
    <header> 
    <h3>Pop Up One</h3> 
    </header> 
    <div class="modal-body"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo at felis vitae facilisis. Cras volutpat fringilla nunc vitae hendrerit. Donec porta id augue quis sodales. Sed sit amet metus ornare, mattis sem at, dignissim arcu. Cras rhoncus ornare mollis. Ut tempor augue mi, sed luctus neque luctus non. Vestibulum mollis tristique blandit. Aenean condimentum in leo ac feugiat. Sed posuere, est at eleifend suscipit, erat ante pretium turpis, eget semper ex risus nec dolor. Etiam pellentesque nulla neque, ut ullamcorper purus facilisis at. Nam imperdiet arcu felis, eu placerat risus dapibus sit amet. Praesent at justo at lectus scelerisque mollis. Mauris molestie mattis tellus ut facilisis. Sed vel ligula ornare, posuere velit ornare, consectetur erat.</p> 
    </div> 
    <footer> <a href="#" class="btn btn-small js-modal-close">Close</a> </footer> 
</div> 

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script> 
$(function(){ 

var appendthis = ("<div class='modal-overlay js-modal-close'></div>"); 

    $('a[data-modal-id]').click(function(e) { 
     e.preventDefault(); 
    $("body").append(appendthis); 
    $(".modal-overlay").fadeTo(500, 0.7); 
    //$(".js-modalbox").fadeIn(500); 
     var modalBox = $(this).attr('data-modal-id'); 
     $('#'+modalBox).fadeIn($(this).data()); 
    }); 


$(".js-modal-close, .modal-overlay").click(function() { 
    $(".modal-box, .modal-overlay").fadeOut(500, function() { 
     $(".modal-overlay").remove(); 
    }); 

}); 

$(window).resize(function() { 
    $(".modal-box").css({ 
     top: ($(window).height() - $(".modal-box").outerHeight())/2, 
     left: ($(window).width() - $(".modal-box").outerWidth())/2 
    }); 
}); 

$(window).resize(); 

}); 
</script>