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

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（我从来都不喜欢这种方法，但它很常见）：

How to load an external webpage into a div of a html page

您可以使用 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

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