Multiple Modal Windows trying to use regular expressions in JS

Question

guys I'm not very familiar with Javascript and the usage of regular expressions I've spent hours digging through resources and trying multiple different ways and just can't seem to get it to work.

I have a menu where when you click the links a modal window will pop up. Currently I have 18 of these links on a page - so there is 18 different modal windows. I have each labeled in the php file like so:

<div class="button_menu">
    <a href="#dialog0" name="modal0" /><div class="button">HQ</div></a>
</div>

Then at the bottom of the PHP File I have this.

<div id="dialog0">
     (Omitted)
</div>
<div id="mask"></div>

This will repeat 18 times from dialog0 - 17 and modal0 - 17.

The JS code is the simple jQuery Modal code that I got off a tutorial at: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

The code in question where I just can't regular expressions to work is here:

$('a[name=modal'.match(/[0-9]/)']').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

And here.....

    //if close button is clicked
    $('.X, #dialog'.match(/[0-9]/)).click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, #dialog'.match(/[0-9]/)).hide();
    }); 

What am I doing wrong? Thank you in advance for the help.

Answer 1

You can use a data attribute on your modals to pass data to your modal open function or a class , or partially match the name: below is an example of using a class to trigger the event and you simply need to retrive the id of the dialog to open.

Fiddle here

HTML

    <div class="button_menu">
    <a href="#dialog0" name="modal0" class="open-dialog"/><div class="button">HQ</div></a>
</div>
<div class="button_menu">
    <a href="#dialog0" name="modal1" class="open-dialog"/><div class="button">HQ</div></a>
</div>
<div id="modal0" class="my-dialog">Dialog 1</div>
<div id="modal1" class="my-dialog">Dialog 1</div>

jQuery

   $(function(){

    //initialize all your dialogs at once
    $( ".my-dialog" ).dialog({ autoOpen: false });



    //bind to your open-dialog (added to your links) class
    $(".open-dialog").on("click", function(e,ui) {
        e.stopPropagation();
        e.preventDefault();
 var dialog_name = $(this).attr('name');
 $("#" + dialog_name).dialog("open");
});
})

Answer 2

Use the jQuery selector $("[name^='modal']"). See http://api.jquery.com/attribute-starts-with-selector/

Answer 3

Use classes and data attributes in your HTML to anchor tag.

<div class="button_menu">
    <a href="#dialog0" name="modal0" data-link=0 class="modalsLink" /><div class="button">HQ</div></a>
</div>

Then using jQuery:

$(".modalsLink").click(function () { 
        //Cancel the link behavior
        e.preventDefault();
        var modalNo = $(this).data("link");
        //Get the A tag
        var id = $(this).attr('href');

        //And do more stuff here.

});