javascript - 多个模态窗口尝试在 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>

这将从dialog0 - 17和modal0 - 17重复18次。

JS 代码是简单的 jQuery Modal 代码，我从教程中获得: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

您可以在模态上使用数据属性将数据传递到模态打开函数或类，或部分匹配名称:下面是使用类触发事件的示例，您只需检索 id要打开的对话框的名称。

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");
});
})