Only open closest modal to button

0
votes

I have a page which has a random number of items each of which has a button and a modal - as I do not know how many items there will be I am using classes for the button and modal.

When I click any button it loads all the modals whereas I only want it to load the next modal - I have tried to use closest and next but cannot get them to fire.

<div class="social-button-container">
    <button type="button" class="social-button">Button</button>
</div>

<div class="socialModal modal fade">
    <h2>123</h2>
</div>

<div class="social-button-container">
    <button type="button" class="social-button">Button2</button>
</div>

<div class="socialModal modal fade">
    <h2>234</h2>
</div>

$(document).ready(function () {
    $('.social-button').click(function () {
        $('.socialModal').modal();
        return false;
    });
});

The above code works in that the modals fire but they all do - I tried using:

$(document).ready(function () {
    $('.social-button').click(function () {
        $('.socialModal').next().modal();
        return false;
    });
});

but this does nothing at all (none fire)

Also tried:

$(document).ready(function () {
    $('.social-button').click(function () {
        $(this).next('.socialModal').modal();
        return false;
    });
});

with the same result - how can I get only the following modal to open on clicking the relevant button?

http://jsfiddle.net/0v0pg7fx/

2
javascriptmodal-dialognextclosest

2 Answers

0
votes

Your selectors were a bit off, and you probably want to in initialize the modals first.

$('.socialModal').modal({show:false});

$('.social-button').click(function () {
    $(this).closest('.social-button-container').next('.socialModal').modal('show');
});

Demo

0
votes
$(document).ready(function () {
                            $('.button').click(function () {
                                $('.Modal').closest().modal();
                                return false;
                            });
                        });