Question

I am using SimpleModal to trigger multiple modals on a page. The jQuery looks like this:

jQuery(function ($) {
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();

        return false;
    }); 
});

However, I have multiple modals on a page, each with a different ID… such as:

#basic-modal_2
#basic-modal-content_2 
#basic-modal_3
#basic-modal-content_3

Etc…

I can achieve this by just adding more jQuery such as:

jQuery(function ($) {
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();

        return false;
    }); 

   $('#basic-modal2 .basic').click(function (e) {
        $('#basic-modal-content2').modal();

        return false;
    }); 
});

But this is wildly inefficient. Is there a way I can just look for the the end of the ID with one call rather than repeating the same thing with different IDs?

Thanks!

Answer 1

You can store the id of the modal in the data-modal-id attribute of .basic

<div id="basic-modal" >
   <div class="basic" data-modal-id="basic-modal-content">

   </div>
</div>

jQuery(function($) {
    $('.basic').click(function(e) {

        var id = $(this).data('modal-id');
        $('#' + id).modal();

        return false;
    });
});​