如何在没有任何插件的情况下在Wordpress上轻松弹出一个窗口?此弹出窗口应仅在首次实地考察时显示。任何想法,配偶?没有任何插件的Wordpress弹出框
1
A
回答
1
也许这:
<a href="https://codepen.io/andrearufo/pen/dyKJG">codepen example</a>
HTML部分在footer.php,在main.js style.css文件和js部分CSS部分,仅此而已。
1
首先下载弹出从这里http://www.jqueryscript.net/lightbox/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions.html
现在粘贴此代码,你想显示弹出到您的模板
<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>
相关问题
- 1. 没有任何主机的WordPress插件
- 2. 是否有可能使没有任何插件的jQuery模式弹出?
- 3. WordPress的模态弹出插件
- 4. 任何jQuery插件,在弹出
- 5. Flipbook没有任何插件
- 6. 没有回复wordpress插件
- 7. WordPress插件中没有AdminMenu
- 8. 自定义WordPress插件没有做任何事
- 9. 在关闭弹出窗口时,没有发生任何事件
- 10. 从C#执行.cmd文件,没有任何弹出窗口
- 11. 有没有在wordpress上指出的帖子的任何行动?
- 12. Jscrollpane插件弹出框问题
- 13. 推文在没有插件的WordPress的
- 14. 有没有办法在插件中轻松制作Wordpress元框?
- 15. Java Applet有任何插件框架吗?
- 16. WordPress的管理屏幕没有任何选项的复选框
- 17. WordPress的插件没有风格?
- 18. WordPress的Google Map API没有插件?
- 19. 如何针对jQuery覆盖插件的防弹Wordpress插件
- 20. 的Magento/WordPress的集成 - WP插件并没有显示出来
- 21. 插件的内容没有出现在WordPress的菜单页
- 22. wordpress部件插件没有做主动
- 23. jQuery弹出框没有显示
- 24. $插件目录没有任何效果
- 25. MvcRoutingShim插件没有任何作用
- 26. jquery.gantt插件没有做任何事
- 27. select2插件没有给出任何改变
- 28. CMS有弹出框
- 29. vb.net&asp.net中的有条件弹出框
- 30. 没有任何弹出窗口的启动Word