我找到了一个不错的弹出模式（动画模式），有一些很酷的选项，但是，它似乎缺少一些功能，顺便说一下它有很好的 stetics，但我认为网页设计师做到了，但忘记了我需要什么哈哈。现在我正在尝试破解这个，但我对 javascript 的了解很短，可能以后我可以为这个项目做出贡献并让它变得更好。
所以背后的想法是了解谁触发了名为 animatedModal() 的自定义事件；我设法通过绑定单击事件并包装调用者然后将其传递给新函数来知道这一点，但是在您再次按下之后，第一个单击事件永远不会触发，一切正常！
请帮帮我=)
这是插件演示和示例。
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMOS</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<style>
#btn-close-modal {
width:100%;
text-align: center;
cursor:pointer;
color:#fff;
}
</style>
</head>
<body>
<!--Call your modal-->
<ul>
<li><a id="demo01" href="#animatedModal">DEMO01</a></li>
<li><a id="demo02" href="#modal-02">DEMO02</a></li>
</ul>
<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
<!--DEMO02-->
<div id="modal-02">
<!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
<div id="btn-close-modal" class="close-modal-02">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/animatedModal.min.js"></script>
<script>
//demo 01
$("#demo01").animatedModal();
//demo 02
//i need something like this
$("#demo02").animatedModal({
modalTarget:'modal-02',
animatedIn:'lightSpeedIn',
animatedOut:'bounceOutDown',
color:'#3498db',
// Callbacks
beforeOpen: function() {
console.log("The animation was called");
},
afterOpen: function() {
console.log("The animation is completed");
},
beforeClose: function() {
console.log("The animation was called");
},
afterClose: function() {
console.log("The animation is completed");
}
});
</script>
</body>
</html>
我需要这样的东西。
$(".deletePieza").animatedModal({
modalTarget: 'deletePiezad',
animatedIn: 'bounceInUp',
animatedOut: 'bounceOut',
color: '#d5d117',
afterClose: Hellow($(this))
});
我试过这个
function Hellow(me) {
console.log($(this));
console.log(this);
alert("sayonara");
//$("a.deletePieza").parentsUntil("div.panelPiezas").css("background", "white");
$(me).parentsUntil("div.panelPiezas").css("background", "white");
};
$(".deletePieza").animatedModal({
modalTarget: 'deletePiezad',
animatedIn: 'bounceInUp',
animatedOut: 'bounceOut',
color: '#d5d117',
afterClose: $.proxy(Hellow,$(this))
});
或者
我已经尝试过使用 $.proxy() 并手动触发点击事件，但它没有触发
function goal(winner) {
$(winner).parentsUntil("div.panelPiezas").css("background", "white");
}
function Paint(me) {
var againme = me;
$("#deletePiezad").css("visibility", "visible");
//$("a.deletePieza").parentsUntil("div.panelPiezas").css("background", "white");
$(".deletePieza").animatedModal({
modalTarget: 'deletePiezad',
animatedIn: 'bounceInUp',
animatedOut: 'bounceOut',
color: '#d5d117',
afterClose: goal(againme)
});
};
$(".deletePieza").animatedModal($.proxy(Paint,$(this)));
再试一次！并且仍然无效，在使用萤火虫调试后出现
function paintme(elementtopaint) {
$(elementtopaint).css("font-size", "40px");
}
//demo 02
$("#demo02").animatedModal({
modalTarget: 'modal-02',
animatedIn: 'lightSpeedIn',
animatedOut: 'bounceOutDown',
color: '#3498db',
// Callbacks
beforeOpen: function () {
console.log("The animation was called");
},
afterOpen: function () {
console.log("The animation is completed");
},
beforeClose: function () {
console.log("The animation was called");
},
afterClose: jQuery.proxy(function (event) {
console.log("hey");
//paintme(event.target);
var cons = event.target;
console.log(this);
//$("#demo02").css("font-size", "40px");
}, this)
});
实现了，但它被窃听了！
//in the css .container{visibility:hidden} //other wise the plugin dosen't hide the containers block and works unproperly
$(".deletePieza").animatedModal();
function Hellow(me) {
$(me).parentsUntil("div.panelPiezas").css("background", "white");
//$("a.deletePieza").parentsUntil("div.panelPiezas").css("background", "white");
};
$("a.deletePieza").on("click", function () {
var caller= $(this);
$("#deletePiezad").css("visibility", "visible");
//$(this).parentsUntil("div.panelPiezas").css("background", "white");
$(".deletePieza").animatedModal({
modalTarget: 'deletePiezad',
animatedIn: 'bounceInUp',
animatedOut: 'bounceOut',
color: '#d5d117',
afterClose: Hellow(caller)
});
});