I created a simple plugin for creating a modal box. the problem is
inspite of using .clone(true), i am not able to get the events bound
with cloned elements
Here is my plugin:
$.fn.modal = function(options)
{
var defaults={
overlay : true,
height : 500,
width : 400,
border : 0,
borderColor : '#666',
showClose : 1
};
var options = $.extend(defaults,options);
return $(this).each(function()
{
if($(this).is('[name=modal]'))
{
var cid = $(this).attr('href');
var id=$(cid).clone(true);
$(this).click(function(e)
{
e.preventDefault();
if(($('body').find('#overlay').length<1) &&
(options.overlay==true))
$('body').append('<div
id="overlay"></div>');
var overlayHeight = $(window).height();
var overlayWidth = $(window).width();
if($.browser.msie && $.browser.version <= 6.0)
var overlayHeight =
$(document).height();
$('#overlay').css({'width':overlayWidth,'height':overlayHeight});
$(id).css({'width':options.width,'height':options.height});
var winH = $(window).height();
var winW = $(window).width();
var dH = options.height;
var dW = options.width;
//Set the popup window to center
$(id).css('top', ((winH-dH)/2))
.css('left', ((winW-dW)/2))
.css('border','solid
'+options.border+'px
'+options.borderColor);
$('#overlay').show();
html = $(cid).html();
$(id).html('');
if($(id).find('.titleBar>.close').length < 1)
$(id).prepend('<div class="titleBar"
id="1"><a href="#"
class="close">Close</a></div>');
if($(id).find('.windowContent').length < 1)
$(id).append('<div
class="windowContent"></div>');
$(id).find('.titleBar').css({
'height' : '20px',
'padding' : '7px 5px 0px 0px',
'text-align': 'right'
});
$(id).find('.windowContent').css({
'height' : (options.height-20-10).toString()+'px',
'padding' : '5px 5px'
});
$(id).find('.windowContent').html(html);
$(id).find('.close').click(function(e){
$(id).hide();
$('#overlay').hide();
});
//$(cid).show();
$(id).insertAfter($(cid)).show();
});
}
});
};
My html is
<a href="#dialog" name="modal">Click me</a>
<div id="dialog" class="window">
<div>
For editing , we need to authenticate you.
Please enter the user name and password for continuing this
process.
</div>
<div id="controls">
<ul class="mod">
<li>User name</li>
<li><input type="text" name="username" id="username"
class="required" /></li>
<li>Password</li>
<li><input type="password" name="password" id="password"
class=required"/></li>
<li><input type="button" value="Authenticate"
id="authBut"/></li>
</ul>
</div>
</div>
<script>
$('#authBut').click(function(){
alert(1);
});
</script>
Here my input button id authBut is cloned as well in the new modal,
but i am not getting any alerts which i get in origional one.
pls help.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
