Why button Close don't close window?

Question

I has a next code in my menu for open window:

            <li class="menu-item navigation-item menu_auth">
                <a onclick="modal(859,'free-coins')" class="free-coins-link has-free-coins">
                    <div class="image free-coins"></div>
                    <div class="text">text1</div>
                    <div class="free-coins-active">+<span class="value">10</span></div>
                </a>
            </li>

And popup block:

 <div class="popup_block" id="free-coins">
     <div class="free-coins-modal">
         <div class="free-coins-item daily-bonus">
             <div class="header">text1</div>
             <div class="free-coins-sprite daily-bonus"></div>
             <div class="free-coins-text">
                 text1
             </div>
             <div class="btn-yellow free-coins-btn btn-get-daily-bonus" onclick="getBonus()">text1</div>
             <div class="error"></div>
         </div><div class="free-coins-item referral">
             <div class="header">text1</div>
             <div class="free-coins-sprite referral"></div>
             <div class="free-coins-text">text1</div>
             <a onclick="redirect('#/referral')" class="btn-blue referral-btn free-coins-btn disabled">text1</a>
         </div><div class="free-coins-item giveaway">
             <div class="header">text1</div>
             <div class="free-coins-sprite giveaway"></div>
             <div class="free-coins-text">text1</div>
             <a onclick="redirect('#/giveaway')" class="btn-blue free-coins-btn btn-get-tasks disabled">text1</a>
         </div>
     </div>
 </div>

Window is show, but doesn't close. I has a css style with close button and JS code in site js:


function modal(id,name) {
        var popID = name;
        $('#' + popID).fadeIn().css({
            'width': id
        }).prepend('<a onclick="modalclose" title="Close" class="close"></a>');
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;
        $('#' + popID).css({
            'margin-top': -popMargTop,
            'margin-left': -popMargLeft
        });
        $('body').append('<div id="fade"></div>');
        $('#fade').fadeIn();
        return false;
}
function modalclose() {
$('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  
    });
}

But i can't close windows by press Esc and can't close by pressing Close button. How i can fix it?

`onclick="modalclose"` isn’t doing anything. You’re not calling the function. Use `onclick="modalclose()"`. Consider [using `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don't_use_these) [instead](https://stackoverflow.com/q/11737873/4642212) of event handlers like [`onclick`](https://stackoverflow.com/a/43459991/4642212). — Sebastian Simon, Aug 10 '19 at 23:59
@SebastianSimon ohhh, my bad. now work when press on image Close. how i can add the ability to close the window by clicking anywhere on the site? — Artem, Aug 11 '19 at 00:06

score 1 · Answer 1 · answered Aug 11 '19 at 00:41

1

@how to add ability to close modal onclick in bounding area:

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

answered Aug 11 '19 at 00:41

Benjamin M. Reed

31
3

Why button Close don't close window?

1 Answers1