Remove button keeps expanding

**wow** · 05-19-2012, 11:08 AM

Hi,

The following code is used to open up a modal window and display some message. At its right top corner, a remove button is appended. When it's clicked, the modal window is closed. The first invocation is fine, but second the remove button expands another half wide, then another, then another, even every time it's removed from the modal window when the button is clicked. How to prevent the remove button keeping expanding? The code is from book Applied jQuery develop and design. Please check the attached picture to look at the modal window after several invocations. Thanks,

Code:

function dispMsg(msgstr) {
	$('body').append('<div id="re" class="errorModal">'+msgstr+'</div>');
	/* 
	 * define the margins so that the modal is centered properly on the screen
	 * we add 80px to the height/width to accomodate for the padding and border
	 * width defined in the css
	 */
	var modalMarginTop = ($('#re').height() + 60) / 2;
	var modalMarginLeft = ($('#re').width() + 60) / 2;
	/* apply the margins to the modal window */
	$('#re').css({
	    'margin-top' : -modalMarginTop,
	    'margin-left' : -modalMarginLeft
	});
	/* fade in the modal window and add a close button to it */
	$('#re').fadeIn().prepend('<a href="#" class="close_error"><img src="images/close_button.png" class="close_button" title="Close Window" alt="Close" /></a>');
	/*
	 * close the error modal and remove
	 */
	$('a.close_error').live('click', function() {
	    $('#re').fadeOut(function() {
			$('a.close_error').remove();
	        $('#re').remove();
	    });
	});
	/* fade out modal and clear form
	$('#registerWindow, #modalShade').fadeOut(function() {
		$('#registerForm input[input*="pe"]').val('');
	}); */
	return;
}

**Padonak** · 05-19-2012, 01:30 PM

what if you replace

Code:

$('a.close_error').live('click', function() {
	    $('#re').fadeOut(function() {
			$('a.close_error').remove();
	        $('#re').remove();
	    });
	});

with

Code:

$('a.close_error').click(function(){
$(this).remove();
$('#re').fadeOut(function(){$(this).remove();});
});

**wow** · 05-19-2012, 10:12 PM

How are you? Padonak, nice to hear from you. Thanks for your response. I change the code as you suggest, but the problem is still there. I just don't understand, it's removed, why it's still there.

Can we modify the following code to something else to overwrite, not to prepend, to solve the problem? Can you show me how it can be overwritten. Thanks,

Code:

$('#re').fadeIn().prepend('<a href="#" class="close_error"><img src="images/close_button.png" 
class="close_button" title="Close Window" alt="Close" /></a>');

Below is their css setting:

Code:

.errorModal{
    display: none;
    background: #FFF5DC;
    color: #040240;
    padding: 20px;
    border: 10px solid #990100;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50&#37;;
    left: 50%;
    z-index: 500;
}

img.close_button {
    float: right;
    margin: -45px -45px 0px 0px;
    border: none;
}

Can " float: right;" be changed to make it always displayed on the same position?

Thanks,