单击按钮时更改模式的内容

Question

我目前正在尝试在 HTML/CSS 中创建一个弹出模式的标记，就像在这个 jsfiddle https://jsfiddle.net/ta5zrvxc/

 .modalContainer { width: 350px; height: 300px; box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30); margin: 0 auto; box-sizing: border-box; border-radius: 10px; text-align: center; padding: 20px; font-family: 'Montserrat' } button { margin: 25px 22px 0; background-color: green; border: 0; padding: 13px 30px; color: white; font-family: Montserrat; font-style: normal; font-weight: bold; font-size: 17px; line-height: 21px; border-radius: 5px; }

 <div class="modalContainer"> <div class="modalContents"> <h1>This is Modal 1</h1> <button>Go to Next</button> </div> </div>

我要做的是单击按钮后，我想将模态的内容更改为例如这样。 https://jsfiddle.net/k7fht5s6/

 .modalContainer { width: 350px; height: 300px; box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30); margin: 0 auto; box-sizing: border-box; border-radius: 10px; text-align: center; padding: 20px; font-family: 'Montserrat' } button { margin: 25px 22px 0; background-color: green; border: 0; padding: 13px 30px; color: white; font-family: Montserrat; font-style: normal; font-weight: bold; font-size: 17px; line-height: 21px; border-radius: 5px; }

 <div class="modalContainer"> <div class="modalContents"> <h1>This is Modal 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque quo cupiditate. `enter code here`</p> <button>Go to Next</button> </div> </div>

我可以通过哪些方式实现这一目标？

Answer 1

像这样？

注意如果没有更多内容，我会删除按钮

向下滚动查看简单的 jQuery 版本

 const content = [ "<h1>This is Modal 1</h1>", "<h1>This is Modal 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Perferendis atque quo cupiditate. </p>" ]; let cnt = 0; window.addEventListener("load", function() { document.querySelector(".modalContents").addEventListener("click", function(e) { const tgt = e.target; if (tgt.tagName.toUpperCase() === "BUTTON") { cnt++; if (cnt < content.length) { this.innerHTML = content[cnt] if (cnt < content.length - 1) { this.innerHTML += '<button>Go to Next</button>' } } } }) document.querySelector(".modalContents").innerHTML = content[cnt] + '<button>Go to Next</button>' })

 .modalContainer { width: 350px; height: 300px; box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30); margin: 0 auto; box-sizing: border-box; border-radius: 10px; text-align: center; padding: 20px; font-family: 'Montserrat' } button { margin: 25px 22px 0; background-color: green; border: 0; padding: 13px 30px; color: white; font-family: Montserrat; font-style: normal; font-weight: bold; font-size: 17px; line-height: 21px; border-radius: 5px; }

 <div class="modalContainer"> <div class="modalContents"> </div> </div>

我建议您只显示和隐藏内容：

 $(function() { $("#page1").show() $("button").on("click", function() { $parent = $(this).closest(".modalContainer") if ($parent.next().is(".modalContainer")) { $parent.fadeOut("slow", function() { $parent.next().fadeIn("slow") }) } }) })

 .modalContainer { width: 350px; height: 300px; box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30); margin: 0 auto; box-sizing: border-box; border-radius: 10px; text-align: center; padding: 20px; font-family: 'Montserrat'; display: none; } button { margin: 25px 22px 0; background-color: green; border: 0; padding: 13px 30px; color: white; font-family: Montserrat; font-style: normal; font-weight: bold; font-size: 17px; line-height: 21px; border-radius: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modalContainer" id="page1"> <div class="modalContents"> <h1>This is Modal 1</h1><button>Go to Next</button> </div> </div> <div class="modalContainer" id="page2"> <div class="modalContents"> <h1>This is Modal 2</h1><button>Go to Next</button> </div> </div> <div class="modalContainer" id="page3"> <div class="modalContents"> <h1>This is Modal 3</h1> </div> </div>

只是内容

 $(function() { $("#page1").show(); const $contents = $(".modalContents"); const length = $contents.length; let idx = 0; $("button").on("click", function() { if (idx < length - 1) { $contents.eq(idx).fadeOut("slow", function() { idx++; if (idx >= length-1) $(".modalContainer button").fadeOut(); $contents.eq(idx).fadeIn("slow") }) } }) })

 .modalContents { display: none; } .modalContainer { width: 350px; height: 300px; box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30); margin: 0 auto; box-sizing: border-box; border-radius: 10px; text-align: center; padding: 20px; font-family: 'Montserrat'; } button { margin: 25px 22px 0; background-color: green; border: 0; padding: 13px 30px; color: white; font-family: Montserrat; font-style: normal; font-weight: bold; font-size: 17px; line-height: 21px; border-radius: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modalContainer"> <div class="modalContents" id="page1"> <h1>This is Modal 1</h1> </div> <div class="modalContents" id="page2"> <h1>This is Modal 2</h1> </div> <div class="modalContents" id="page3"> <h1>This is Modal 3</h1> </div> <button>Go to Next</button> </div>

Answer 2

您可以通过多种方式执行此操作：

如果您使用的是 Angular/Vue/React 之类的框架，则可以设置模态的内部以显示路线。 单击给定按钮只会更改当前显示在模态中的路线内容。 相关框架文档（angular.io 等）中有很多这样的例子。 现在，这可能是首选方法，因为它避免了直接操作 DOM。

您可以使用“object”标签通过“source”属性显示页面内容。 通过切换源属性，您可以切换内部内容。 你也可以使用 iFrame（我从来不喜欢这种方法，但它很常见）：

如何将外部网页加载到 html 页面的 div 中

您可以使用 DocumentFragment，使用您想要的任何内容创建一个全新的 DOM 设置，然后将其附加到您的模态的顶级 div（在清除旧的 div 之后）。 这个 API 非常强大，我一直喜欢使用它。

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

你可以用你想要的任何东西替换给定 div 的innerHTML（这是最不推荐的方法，但如果你的内容相对良性，它是可以接受的）。 所以：

const elem = document.querySelector([your-css-selector]);
elem.innerHTML = '<div>Your new content</div>';

当然，上述任何例程都可以由 button.onclick 处理程序触发。

Answer 3

将 addEventListener(click) 添加到按钮然后获取元素然后更改数据

 document.getElementById("myBtn").addEventListener("click", function(){ var x = document.getElementsByClassName("modalContents")[0]; x.innerHTML = `<h1>This is Modal 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque quo cupiditate.</p> <button>Go to Next</button>` });

 .modalContainer { width: 350px; height: 300px; box-shadow: 0px 28px 28px 9px rgba(0,0,0,0.30); margin: 0 auto; box-sizing: border-box; border-radius: 10px; text-align: center; padding: 20px; font-family: 'Montserrat' } button { margin: 25px 22px 0; background-color: green; border: 0; padding: 13px 30px; color: white; font-family: Montserrat; font-style: normal; font-weight: bold; font-size: 17px; line-height: 21px; border-radius: 5px; }

 <div class="modalContainer"> <div class="modalContents"> <h1>This is Modal 1</h1> <button id="myBtn">Go to Next</button> </div> </div>

Answer 4

您可以将它们隐藏在代码中并使用 jQuery 显示它们，而不是直接更改模式的内容。 例子：

直播版： https : //jsfiddle.net/2q37fLew/

<div class="modalContainer" id="modal1">
  <div class="modalContents">
    <h1>This is Modal 1</h1>
    <button>Go to Next</button>
  </div>
</div>

<div class="modalContainer" id="modal2">
  <div class="modalContents">
    <h1>This is Modal 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque quo cupiditate.</p>
    <button>Go to Next</button>
  </div>
</div>

.modalContainer {
  /* your original code... */
  display: none;
}

/* your original code... */

$(document).ready(function () {
  var activeModal = 1;
  $('#modal' + activeModal).show();

  $('.modalContainer button').click(function () {
      $('#modal' + activeModal).fadeOut(300, function onComplete () {
      activeModal++;
      $('#modal' + activeModal).fadeIn();
    });
  });
});

您不需要 jQuery，但是您添加了 jQuery 作为 post 标签之一，所以我建议使用此库的解决方案。

Answer 5

您可以在按钮单击时调用函数并获取需要更改的元素。

 function changeContent() { document.getElementById("modal-heading").innerHTML = "This is Modal 2"; }

 <div class="modalContainer"> <div class="modalContents"> <h1 id="modal-heading">This is Modal 1</h1> <button onclick="changeContent()">Go to Next</button> </div> </div>

这是最直接的方式。 根据您的要求，您可以移动以做出反应并创建模态组件，该组件将内容作为道具并显示该内容而无需重新加载页面。

Answer 6

您可以使用 jQuery 简单地添加和删除.active类。

这是一个演示https://codepen.io/Rahul_Ravindran/pen/xxGMPJG

我不确定它的正确方式，但它有效。