binding an event of a Jquery third party plugin
Question
i've found a nice popup modal ( animatedmodal ) with some cool options but, it seems like it lacks of some functionality it has very nice stetics by the way but i think a web designer made it but the forgort what i need haha.Now i'm trying to hack this but i have short knowledge on javascript may be later on i can contribute to this project and make it better.
so the idea behind is getting know who fired the custom event its named animatedModal(); i manage to do know this by binding a click event and wrapping the caller and then passing it to a new function but the first click event never fires up after that you press again and everything goes ok!
please help me =)
this is the plugin demo and examples.
<!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>
i need something like this.
$(".deletePieza").animatedModal({
modalTarget: 'deletePiezad',
animatedIn: 'bounceInUp',
animatedOut: 'bounceOut',
color: '#d5d117',
afterClose: Hellow($(this))
});
i've tried with 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))
});
or
i've tried somethin with $.proxy() and triggering manually the click event but it does not fires up
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)));
another try! and still uneffective,after debugin with firebug this shows up
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)
});
achieved but its bugged!
//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)
});
});
1 answers
solution1
0 2016-04-30 16:17:32
您可以在此行中调用模式：
$('#demo01').click();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.