On my website I have 4 Windows (identified by target1, target2, target3 and target4). On these Windows I want to add a button with a name of "close" and using an onClick event call the correct function depending on which window.

function close_window1(){
    document.getElementById('target1').style.display = 'none';  
}

function close_window2(){
    document.getElementById('target2').style.display = 'none';  
}

function close_window3(){
    document.getElementById('target3').style.display = 'none';  
}

function close_window4(){
    document.getElementById('target4').style.display = 'none';  
}

I'm sure there is a better way than this:

function close_window(){
    $(this).parents('div').style.display='none'
}

This will close only the window that has the event, but it doesn't work.

Could someone help me please?

On my website I have 4 Windows (identified by target1, target2, target3 and target4). On these Windows I want to add a button with a name of "close" and using an onClick event call the correct function depending on which window.

function close_window1(){
    document.getElementById('target1').style.display = 'none';  
}

function close_window2(){
    document.getElementById('target2').style.display = 'none';  
}

function close_window3(){
    document.getElementById('target3').style.display = 'none';  
}

function close_window4(){
    document.getElementById('target4').style.display = 'none';  
}

I'm sure there is a better way than this:

function close_window(){
    $(this).parents('div').style.display='none'
}

This will close only the window that has the event, but it doesn't work.

Could someone help me please?

• javascript
• html
• function
• window
• call

4 Answers 4

if i understand that correctly you can simply use this:

var windows = $('#target1, #target2, #target3, #target4');
windows.on('click', function() {
  $(this).hide();
});

You should consider giving the button an class:

HTML

<div class="windows">
 <button class="close_window">X</button>
</div>

JS

var closeButtons = $('.close_window');
closeButtons.on('click', function() {
  $(this).parent().hide();
});

Then you can get actually the goal you want :-)

Regards

You could start by making the id a parameter of the function like so:

function close_window(id) {
    document.getElementById(id).style.display = 'none';
}

That way your button's onclick would have to look something like this: "close_window('target1')"

You could also find the window to close by going up the DOM starting from the button. To give you an example for that we would need to see the actual HTML.

Please check the fiddle

http://jsfiddle/7s49z1zn/

Add a mon class for the windows and close button.

$('.close').click(function(){
    $(this).parents('.window').css('display','none');

});

This should work

I imagined code like this:

<div class="window" id="target2">
    <p>TEXT</p>
    <a href="#">Close</a>
</div>

If you have code like this, you can use $('.window a').click(); to catch click event

then get parent var parentWindow = $(this).parent();

(for testing, you can get window ID via parentWindow.prop('id');)

and finally close/hide/fade... parentWindow.fadeOut();

Here is DEMO