javascript - 模态窗口 : How can I set a different content for each modal?

Question

我正在处理我自己的自定义模式窗口，但我遇到了问题。我想创建多个模态窗口，但我需要为每个窗口应用不同的内容。

我的 HTML 代码:

        <div id="footer">
            <div class="wrapper">
                <ul>
                    <li>
                        <a class="modal-window-trigger" id="help" href="help.php">Help</a>
                    </li>
                    <li>
                        <a class="modal-window-trigger" id="faq" href="faq.php">Frequently Asked Questions</a>
                    </li>
                </ul>
                <span id="footer-copyright">
                    <a href="./..">Coded by Dylan - ©2015-2016</a>
                </span>
            </div>
        </div>
        <div class="modal-window">
            <div class="modal-window-container">
                <span class="modal-window-closer" title="Close the overlay"></span>
                <h1 class="big-title" style="margin-bottom: 15px;">First Modal Window</h1>
                <p>First Modal Window Text</p>
            </div>
        </div>
        <div class="modal-window">
            <div class="modal-window-container">
                <span class="modal-window-closer" title="Close the overlay"></span>
                <h1 class="big-title" style="margin-bottom: 15px;">Second Modal Window</h1>
                <p>Second Modal Window Text</p>
            </div>
        </div>
        <div id="expose-mask"></div>

我的 JavaScript 代码:

(function($)
{
    $(".modal-window-trigger").click(function(e)
    {
        e.preventDefault();
        $(".modal-window").addClass("shown");
        $("#expose-mask").css({"visibility": "visible"});
    });
    $(".modal-window-closer, #expose-mask").click(function(){
        $("#expose-mask").css({"visibility": "hidden"});
        $(".modal-window").removeClass("shown");
    });
})(jQuery);

结果:http://prntscr.com/7gd7g6

我想在点击“帮助”文本时显示具体内容，在点击“常见问题”文本时显示其他内容。

如何为每个模态设置唯一的数据？

Answer 1

    (function($)
        {
            $(".modal-window-trigger").click(function(e)
            {
                e.preventDefault();
                var modal_id = $(this).attr('name');
                show_modal(modal_id)

            });
            $(".modal-window-closer, #expose-mask").click(function(){
                $("#expose-mask").css({"visibility": "hidden"});
                $(".modal-window").removeClass("shown");
            });
        })(jQuery);

        function show_modal(modal_id){      
            $('#'+modal_id).addClass("shown");
            $("#expose-mask").css({"visibility": "visible"});  
        }  

为 <a class="modal-window-trigger" name="model1"> 添加名称属性并将 modal-window 的 id 分别更改为 model1。