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

当我点击＆＃34;帮助＆＃34;时，我想显示具体的内容。当我点击＆＃34;常见问题＆＃34;时，文字和其他内容;文本。

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

Answer 1

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

将类模态窗口更改为第一个窗口的modal-window1，将模态窗口更改为第二个窗口的模态窗口

Answer 2

    (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">添加名称属性，并将模态窗口分别更改为model1。

Answer 3

我在用React创建一个Web应用程序时遇到了同样的问题。首先，我创建了一个名为GeneralModal的react组件。在第一个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>

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

3 个答案: