Question

我想点击链接时添加弹出窗口，此弹出窗口将包含wordpress中的简报形式。

为此，我在我的html页面中创建了这段代码：

＆＃13;

<script type="text/javascript">
alert('OK!');
$(document).ready(function(e){
	
	$("#ouvrir_f").click(function(e){
		
		$(".arr_plan, .f_modale").css("display", "block");
		$(".arr_plan").animate({'opacity':'0.5'},350);
		$(".f_modale").animate({'opacity':'1'},350);
	});
	
	
	
});
</script>

＆＃13;

.arr_plan{background: grey;cursor: pointer;display: none;height: 100%;left: 0px; position: absolute; top: 0px; width:100%;  }
.f_modale{background: #ffffff; border: #000 solid 1px; border-radius: 5px; box-shadow:0px 0px 5px #444444; display: none; height: 220px; left: 30%; padding: 10px;position: absolute; top: 25px; width: 500px;}
.fermer{cursor: pointer; display: block; font-size; 12px; font-weight: bold; text-align: right;}
.fermer:hover{text-decoration: underline;}

＆＃13;

<a href="#" id="ouvrir_f" class="ouvrir_f">Ouvrir</a>
	<div class="arr_plan" ></div>
		<div class="f_modale">
			<span class="fermer">fermer</span>
			<h3>Titre fenetre modale</h3>
				<p>Bla bla bla bla .....</p>
		</div>

＆＃13;

但是当我点击链接时，它没有显示弹出窗口。

感谢您的帮助。

Answer 1

在这里 - 专门为您准备的工作示例：

http://codepen.io/Nikolaus91/pen/VaMOvJ

没有真正检查你的解决方案，只知道它没有机会发挥作用。附加模态非常简单。我建议使用Formstone.it或Foundation 6中的模态。

$(".show").on("click", function () {
    $(".mask").addClass("active");
});


function closeModal() {
    $(".mask").removeClass("active");
}

$(".close, .mask").on("click", function () {
    closeModal();
});

$(document).keyup(function (e) {
    if (e.keyCode == 27) {
        closeModal();
    }
});

在wordpress中显示弹出窗口

1 个答案: