模態窗口：如何為每個模態設置不同的內容？

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 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-window 更改為 modal-window1 用於第一個窗口，將 modal-window 更改為 modal-window2 用於第二個窗口

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">添加 name 屬性，並將 modal-window 的 id 分別更改為 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>