模态窗口:如何为每个模式设置不同的内容？

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">添加name属性，并将id -窗口分别更改为model1。

Answer 2

    (function($)
    {
        $(".modal-window-trigger").click(function(e)
        {
            e.preventDefault();
            var attrid = $(this).attr('id');
            if(attrid=='help'){
                $(".modal-window1").addClass("shown");
                $("#expose-mask").css({"visibility": "visible"});
                return;
            }else if(attrid=='faq'){
                $(".modal-window2").addClass("shown");
                $("#expose-mask").css({"visibility": "visible"});
                return;     
            }
        });
        $(".modal-window-closer, #expose-mask").click(function(){
            $("#expose-mask").css({"visibility": "hidden"});
            $(".modal-window").removeClass("shown");
        });
    })(jQuery);

第一窗口改为模态窗口1，第二窗口改为模态窗口2。

Answer 3

我只是遇到了同样的问题，而创建一个网络应用程序的反应。首先，我创建了一个react组件调用GeneralModal。在第一个div标记中，我分配了id={props.id}，这样每当我想将新内容传递到模态框架中时，我都会为该模式创建一个新id，而不必重复代码。如下所示：

<div class="modal fade" id={props.id} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

然后，在我想要传递新内容的地方(模态体)，我使用了

<div class="modal-body">
   {props.children}
</div>

在我想要调用的组件中，我写到：

<BackdropModal children={<About/>} id={"about"} next={false} title={"About Peacock"}/>

在这里，我将一个id分配给带有内容的通用模式，以便该id与特定内容唯一地关联。

然后，我使用这个按钮调用带有以下特定内容的模式：

<a class="nav-link" data-toggle="modal" data-target="#about" href="#about">About</a>