Hide pop up onclick button

Question

once we click on login , we want to hide the entire pop up box. I tried as below code.

<div class="ajaxlogin-window">
<div id="ajaxlogin-login-window">
<!-- other code -->
<button class="button"  id="send2" id="close" onclick="window.ajaxlogin-login-window()" >
Login
</button>

also i tried onclick="parentNode.remove()" but it hide only bottom half of pop up. tried lot of other things. so tried to use same code that close button is using as below. but nothing worked for me.

close button :

<a href="javascript:void(0)" class="close">Login button</a>

script

document.observe("dom:loaded", function() {
        var triggers = {
            login: {
                el    : $$('.ajaxlogin-login'),
                event : 'click',
                window: $('ajaxlogin-login-window'),
                size: {
                    maxWidth: 300
                }
            },

just use jQuery and either trigger a "hidden" class that toggles display: none, or even use it to remove the box entirely. I'd recommend moving to Vue.js where you can link a boolean value to the display value of the box, that way you just switch that value to on or off and Vue handles everything for you. — Simon Hyll, Apr 26 '17 at 06:36
[Every element should only have ONE `id` attribute](http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids) — caramba, Apr 26 '17 at 06:41
@caramba thanks for link, can i hide with help of `onclick`.... — , Apr 26 '17 at 06:42
Is this even valid JavaScript, `onclick="window.ajaxlogin-login-window()"`? Shoudn't that be `onclick="window.ajaxlogin_login_window()"`? — Red, Apr 26 '17 at 06:56
@RichardMauritz sorry for that, i tried as you suggested.... but no luck...... — , Apr 26 '17 at 06:59

score 4 · Accepted Answer · answered Apr 26 '17 at 07:04

4

First add id attribute for the parent div

<div id="mydiv" class="ajaxlogin-window">

now use this script

function hide() {
    document.getElementById('mydiv').style.display = 'none';
}

then add the onclick event to your button like this

<button class="button"  id="send2" onclick="hide()" >
Login
</button>

this should work

answered Apr 26 '17 at 07:04

Mhd Alaa Alhaj

2,438
1
11
18

i followed exactly as you said, than after i click on `login` , it hided the `login` button , but i need to hide complete pop up in [link](http://sbdev2.kidsdial.com:81/custom-apple-iphone-4.html) – Apr 26 '17 at 09:36
Can you give me a link or fiddle for your work ? @user5348fh8y5 – Mhd Alaa Alhaj Apr 26 '17 at 09:40
there is a problem with the link it doesn't open, are you sure this website doesn't require registration ? @user5348fh8y5 – Mhd Alaa Alhaj Apr 26 '17 at 09:54
Please try to change the function name e.g. `hideWindow()` – Mhd Alaa Alhaj Apr 26 '17 at 11:10
thanks, it worked , but it not allowing me to click on `add to cart` buttton if i click on login button http://prnt.sc/f10935 , but if i use the `close` buttton, than i can able to add product to cart..... http://prnt.sc/f1092o , is it any `z index` issue ? – Apr 26 '17 at 11:19
try to put this script instead the one you are using `function hideWindow() { document.getElementById('something').style.display = 'none'; document.getElementById('ajaxlogin-mask').style.display = 'none'; }` – Mhd Alaa Alhaj Apr 26 '17 at 11:36
this is magento project, did you worked on magento before ? – Apr 26 '17 at 11:58
Welcome anytime :) and nope I've never been working on magento. – Mhd Alaa Alhaj Apr 26 '17 at 12:02

score 0 · Answer 2 · answered Apr 26 '17 at 06:59

0

Add display:none on main div of popup from js when you click button.

$(document).('on','click',function(){
 <div id="div1">//your main popup div like this
 document.getElementById('div1').style.display = 'none';
})

answered Apr 26 '17 at 06:59

Rajnish

167
1
5

Thanks & sorry for late reply, i followed your answer in [link](http://sbdev2.kidsdial.com:81/custom-apple-iphone-5.html) , after i click on `login` , it hided the login button , but i need to hide complete pop up in link , lease upload image/add text, than click on save design buttton, you can see pop up. – Apr 26 '17 at 09:57

Hide pop up onclick button

2 Answers2