如何在一个模态中显示不同的 <div>？

Question

如何在一个模式中显示（切换）不同的 div？让我解释： - 当我点击“显示更多”时，我想触发模态（以及它在我的情况下的工作） - 接下来，我关闭它（它有效） - 我想再次触发模态但在不同的 div 和 offcourse 我希望这个 div 再次处于模态（现在这就是我卡住的地方）。

低于我的代码的 sn-p...

HTML：

<div id="modal" class="modal">
                    <div class="modal-content">
                        <span class="close-button">×</span>
                        <div id="wrapper" class="modified">
                        <!-- Main -->
                            <section>
                                <div class="inner">
                                    <h1 class="major">DJ ZA POROKE</h1>
                                    <p align="justify">some text</p>
                                    <p align="justify">some text</p>

                                </div>
                            </section>

                        </div>
                    </div>
                </div>

JS：

var modal = document.querySelector(".modal");
        var trigger1 = document.querySelector(".trigger1");
        var closeButton = document.querySelector(".close-button");

        function toggleModal() {
            modal.classList.toggle("show-modal");
        }

        function windowOnClick(event) {
            if (event.target === modal) {
                toggleModal();
            }
        }
        trigger1.addEventListener("click", toggleModal);
        closeButton.addEventListener("click", toggleModal);
        window.addEventListener("click", windowOnClick);

假设我像这样触发它：

<div class="middle">
<div class="text trigger"><a href="#modal">Show me more..</a></div>

感谢您的帮助。 问候。

Answer 1

所以要正确：
。

• 用户点击一个按钮/其他元素（“显示更多”）和一个
• 模态显示内容为 1
• 模态关闭
• 用户再次单击按钮/其他元素（“显示更多”）和
• 模态显示内容为 2。
• 模态关闭

您有 2 个选项：

• 调用两个不同的模态，除了内容相同 -> 这可以通过 JS 中的状态变量来完成

  var stateContent = 0;

并检查我们处于哪个状态的按钮单击事件

• 第二个更优雅的显示/隐藏相关的div

添加了 HTML

<div id="modal" class="modal">
                    <div  class="modal-content">
                        <span class="close-button">×</span>
                        <div id="wrapper" class="modified">
                        <!-- Main -->
                            <section>
                                <div id="content_1" class="inner" style="display: block"> <!-- ID added This part is shown -->
                                    <h1 class="major">DJ ZA POROKE</h1>
                                    <p align="justify">some text</p>
                                    <p align="justify">some text</p>
                                </div>
                                  <div id="content_2" class="inner" style="display: none"> <!-- ID added This part is hidden -->
                                    <h1 class="major">XY ZZ POROKE</h1>
                                    <p align="justify">some OTHER text</p>
                                    <p align="justify">some OTHER text</p>
                                </div>
                            </section>
                        </div>
                    </div>                  
                </div>

在 javascript 中，您可以更改显示样式 - 为简化起见，我在关闭按钮上执行此操作

closeButton.addEventListener("click", function(e){
    switchContent();
    toggleModal();
});

做我们想要的内容切换的新功能：

function switchContent(){
    var content1 = document.getElementById("content_1");
    var content2 = document.getElementById("content_2");
    // Check in which state we are
    if (content1.style.display === 'none') {
        content1.style.display = 'block';
        content2.style.display = 'none';
        }
        else {
            content1.style.display = 'none'; 
            content2.style.display = 'block';       
        }
}