javascript — несколько модальных Windows, пытающихся использовать регулярные выражения в JS
ребята, я не очень знаком с 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();
});
Что я делаю неправильно? Заранее благодарю за помощь.
Решение
Вы можете использовать атрибут данных в ваших модальных моделях для передачи данных в вашу модальную открытую функцию или класс или для частичного совпадения с именем: ниже приведен пример использования класса для запуска события, и вам просто нужно получить идентификатор диалога открыть.
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");
});
})
Другие решения
Используйте селектор jQuery $ («[name ^ = ‘modal’]»). Увидеть http://api.jquery.com/attribute-starts-with-selector/
Используйте классы и атрибуты данных в вашем 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.
});