我在我的 wordpress 网站上使用自定义 pupup,但是在本地服务器上测试时,弹出窗口使用简单的 index.html 可以正常工作,但是当我将它嵌入 wordpress header.php 和 style.css 中的类似本地服务器时,它不起作用下面是我的代码和放置文件
在我的/wordpress/wp-content/themes/parasponsive/header.php 中
我将下面的 jquery 代码放在 head 部分
<script>
$(document).ready(function(){
$(function(){
$('span.clickMe').click(function(e){
var hiddenSection = $('section.hidden');
hiddenSection.fadeIn()
// unhide section.hidden
.css({ 'display':'block' })
// set to full screen
.css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
.css({ top:($(window).height() - hiddenSection.height())/2 + 'px',
left:($(window).width() - hiddenSection.width())/2 + 'px' })
// greyed out background
.css({ 'background-color': 'rgba(0,0,0,0.5)' })
.appendTo('body');
// console.log($(window).width() + ' - ' + $(window).height());
$('span.close').click(function(){ $(hiddenSection).fadeOut(); });
});
});
});
然后在我的标题结束标记上方的类似标题 .php 中,我放置了 html
</section>
<section class="hidden">
<article class="popup">
<span class="close">Close Me</span>
<p>
This is a test.
</p>
</article>
</section>
然后在风格/wordpress/wp-content/themes/parasponsive/style.css
section.center {
max-width: 150px;
margin: 100px auto;
}
span.clickMe {
font-size: 30px;
}
span.clickMe:hover {
cursor: pointer;
color: green;
}
section.hidden {
display: none;
position: fixed;
}
section article.popup {
position: relative;
width: 400px;
height: 300px;
background: #e3e3e3;
color: #222;
border: 1px solid #333;
border-radius: 3px;
padding: 5px 7px;
margin: 10% auto;
}
span.close {
text-transform: uppercase;
color: #222;
}
span.close:hover{
color: red;
cursor: pointer;
}
但它甚至没有被点击,这是怎么回事
最佳答案
试试这个:
( function( $ ) {
$('span.clickMe').click(function(e){
var hiddenSection = $('section.hidden');
hiddenSection.fadeIn()
// unhide section.hidden
.css({ 'display':'block' })
// set to full screen
.css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
.css({ top:($(window).height() - hiddenSection.height())/2 + 'px',
left:($(window).width() - hiddenSection.width())/2 + 'px' })
// greyed out background
.css({ 'background-color': 'rgba(0,0,0,0.5)' })
.appendTo('body');
// console.log($(window).width() + ' - ' + $(window).height());
$('span.close').click(function(){ $(hiddenSection).fadeOut(); });
});
} ) (jQuery);
关于jquery - Wordpress 自定义弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26944221/