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
                }
            },

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
                }
            },

• javascript
• css

• 2 kindly show your javascript – prasanth Commented Apr 26, 2017 at 6:33
• just use jQuery and either trigger a "hidden" class that toggles display: none, or even use it to remove the box entirely. I'd remend 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 Commented Apr 26, 2017 at 6:36
• Every element should only have ONE id attribute – caramba Commented Apr 26, 2017 at 6:41
• @caramba thanks for link, can i hide with help of onclick.... – user6619012 Commented Apr 26, 2017 at 6:42
• Is this even valid JavaScript, onclick="window.ajaxlogin-login-window()"? Shoudn't that be onclick="window.ajaxlogin_login_window()"? – Red Commented Apr 26, 2017 at 6:56

2 Answers 2

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

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';
})