绑定Jquery第三方插件的事件
我发现了一个很好的弹出模式，有一些很酷的选项，但是，它似乎缺少一些功能，顺便说一句，它有很好的结构，但我认为是一个网页设计师做的，但我需要的是什么哈哈。现在我正在尝试破解这个问题，但我对javascript的知识不多，可能以后我可以为这个项目做出贡献，使它变得更好 因此，背后的想法是了解是谁触发了定制事件，即名为animatedModal的事件；我通过绑定一个click事件并包装调用者，然后将其传递给一个新函数来了解这一点，但是在您再次按下后，第一个click事件永远不会触发，一切都正常 请帮帮我= 这是插件演示和示例绑定Jquery第三方插件的事件,jquery,plugins,event-handling,event-binding,Jquery,Plugins,Event Handling,Event Binding,我发现了一个很好的弹出模式，有一些很酷的选项，但是，它似乎缺少一些功能，顺便说一句，它有很好的结构，但我认为是一个网页设计师做的，但我需要的是什么哈哈。现在我正在尝试破解这个问题，但我对javascript的知识不多，可能以后我可以为这个项目做出贡献，使它变得更好 因此，背后的想法是了解是谁触发了定制事件，即名为animatedModal的事件；我通过绑定一个click事件并包装调用者，然后将其传递给一个新函数来了解这一点，但是在您再次按下后，第一个click事件永远不会触发，一切都正常 请帮帮
<!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>
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))
});
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)));
//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)
});
});
您可以通过以下线路调用modal：
$('#demo01').click();
请对你的答案作一个更好的描述，以便它有用。
//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)
});
});
$('#demo01').click();