Несколько модальных Windows пытаются использовать регулярные выражения в JS

Question

Ребята, я не очень знаком с Javascript и использованием регулярных выражений. Я часами копался в ресурсах и пробовал разные способы, и, похоже, просто не могу заставить его работать.

У меня есть меню, где при нажатии на ссылки появляется модальное окно. В настоящее время у меня есть 18 таких ссылок на странице - так что есть 18 различных модальных окон. Каждый из них помечен в файле php следующим образом:

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

Затем в нижней части файла PHP у меня есть это.

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

Это будет повторяться 18 раз из диалога 0 - 17 и модального 0 - 17.

Код JS - это простой модальный код jQuery, который я получил из учебного руководства по адресу: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Этот код, где я просто не могу работать с регулярными выражениями, находится здесь:

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

И здесь.....

    //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();
    }); 

Что я делаю неправильно? Заранее благодарю за помощь.

Answer 1

Вы можете использовать атрибут данных в ваших модальных моделях для передачи данных в вашу модальную открытую функцию или класс или для частичного совпадения с именем: ниже приведен пример использования класса для запуска события, и вам просто нужно получить идентификатор диалогового окна. открыть.

Скрипка здесь

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

Используйте селектор jQuery $("[name^='modal']"). Смотрите http://api.jquery.com/attribute-starts-with-selector/

Answer 3

Используйте классы и атрибуты данных в вашем HTML для привязки тега.

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

Затем с помощью 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.

});