CODEWITHSUNDEEP
javascriptjqueryajax
Abdul Ahmad
Abdul Ahmad

Reputation: 10021

cancel button in modal popup not working

I have a view that gets an ajax partial view and shows it as a modal popup. The problem is, the partial view has a cancel button on it with a certain id attribute, but its .click javascript event is attached to the main view. so something like this:

Main View

<div>
 some_ajax_link
</div>

<div id="partial_container"></div>

<script>
  $(document).ready(function () {
        $('ajax_link').click(function (e) {
            var hiddenSection = $('#partial_container');
            hiddenSection.fadeIn()
                // unhide section.hidden
                .css({ 'display': 'block' })
                // set to full screen
                .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
                .css({
                    top: ($(window).height() - hiddenSection.height()) / 2 + 'px',
                    left: ($(window).width() - hiddenSection.width()) / 2 + 'px'
                })
                // greyed out background
                .css({ 'background-color': 'rgba(0,0,0,0.5)' });
        });
});
$('#partial_container').on('click', '#close_button', function () {
    $('#partial_container').fadeOut();
});
</script>

Partial

<div> Some stuff </div>
<button id="close_button">Cancel</button>

The reason I have the cancel button in the partial is for styling purposes, when the button is in the main view it works fine for some reason. I'm confused because when the partial is retrieved it ends up on the same page

EDIT

not sure why theres .appendTo('body'), I got this script somewhere online, is it necessary?

Upvotes: 0

Views: 1996

Answers (2)

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

I ended up adding the script on the partial view where the button is

$('close_button').click(function() {
 $('modal_popup_id').fadeOut();
});

it seems like when the modal 'fades in' things in the background are disabled temporarily, so the click event is not called when the button is clicked (or any script on the background main view is not triggered)

Upvotes: 0

falinsky
falinsky

Reputation: 7428

 $('#partial_container').on('click', '#close_button', function () { 
     $('#partial_container').fadeOut(); 
 });

Upvotes: 1

Related Questions