如何在 HTML 中的不同模态框内显示不同的值

Question

我只想在这里分享我在 W3schools 上获得创意的代码。我已经搜索了相同的主题，但它并没有解决我的代码问题。

/* The Modal (background) MY CSS CODE*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* The Modal1 (background) */
.modal1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

这里是 Javascript 代码

<!-- Javascript -->
<script>
// Get the modal
var modal = document.getElementByclass("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>


<script>
// Get the modal1
var modal = document.getElementByIclass("myModal1");

// Get the button that opens the modal
var btn = document.getElementById("myBtn1");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

最后，HTML 代码

<!-- Trigger/Open The Modal -->
<button id="myBtn">Apply Now</button>

<!-- The Modal -->
<div class="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal..</p>
</div>
</div>


<!-- Trigger/Open The Modal1 -->
<button id="myBtn1">Apply Now</button>

<!-- The Modal -->
<div class="myModal1" class="modal1">

<!-- Modal content -->
<div class="modal-content">
<span class="close1">&times;</span>
<p>Some text in the Modalsssssss..</p>
</div>
</div>

我已经坚持了很长时间了。任何意见或建议将不胜感激。

Answer 1

**** 更新**

阅读您的评论，我同意，这很“hacky”，我个人几乎不会这样做。所以我想向您展示一个更接近我在生产站点上所做的解决方案。快速概览：

实际模式的代码很好，所以我们可以使用它。
我认为这里的“hacky”是我们获取数据以提供给模态的方式。在 HTML 元素中存储数据并不可怕，但有更好的方法来做到这一点。
存储这种数据（字符串、数字等）的一个好方法是 JSON。
我们可以在文档本身中包含 JSON 数据，或者我们可以使用 AJAX 将其存储在不同的位置。可能是服务器上的文件，也可能是某处的数据库。

More info on $.getJSON() method.

/* Same code from previous example. New code marked with comments */
$("body").on("click", ".toggle-modal", function() {
  if ($(".modal").is(":visible")) {
    $(".modal").fadeOut("fast", function() {
      $(this).remove()
    });
  } else {

    /* Get the data ID from the html element  */
    const data_id = $(this).data("modal-text");

    /*  Get JSON data from file on server (simplified)
        Replace the url with the path to your JSON file on the server. */
    $.getJSON("https://httpbin.org/json", function(response) { // <-- Callback function

      /*  This is the "callback" function from the "getJSON" method
          This fires when the AJAX request has been completed
          This function has access to the AJAX response variable which contains the returned data */

      /* Light validation here just checks if the response is json */
      if (typeof response == 'object') {

        /* For kicks let's check out the response */
        console.log(response);

        /* The response is obviously not our data. Next variable emulates correct response */
        response = {
          primary_modal: "The message for the primary modal",
          secondary_modal: "The message for the secondary modal"
        }

        /*  Get the correct message from the response. 
            Use the value from the data attribute as the key to find our data in the json structure */
        const msg = response[data_id];

        /* Launch the modal */
        const modal = $("<div />", {
            "class": "modal"
          }).append(
            $("<div />", {
              "class": "modal-overlay toggle-modal"
            }),
            $("<div />", {
              "class": "modal-container"
            }).append(
              $("<div />", {
                "class": "modal-close toggle-modal"
              }),
              $("<div />", {
                "class": "modal-content"
              }).text(msg) // <-- The message
            )
          ).appendTo("body")
          .fadeIn("fast")
          .css("display", "flex");
      } else {
        return "Couldn't get the data";
      }

    });
  }
})

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: cyan;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  padding: 20px;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, .8);
  cursor: pointer;
}

.modal-container {
  background: white;
  margin: auto;
  position: relative;
  font-size: 16px;
  line-height: normal;
  text-align: center;
  font-weight: bold;
  z-index: 20;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
  padding: 8px 20px;
  background: coral;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-close:before {
  content: "X"
}

.modal-content {
  padding: 35px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- We removed the modal data and added a reference to the data in the json -->

<div>
  <button class="toggle-modal" data-modal-text="primary_modal">Click Here</button>

  <button class="toggle-modal" data-modal-text="secondary_modal">Click Here</button>
</div>

这是一种非常简单的方法，可以使用 jQuery 为不同的内容重新调整模态模板。基本上，您将消息直接存储在按钮的数据属性中，然后将该内容附加到动态生成的模式中。

/* Listen for the click event on the button */
$("body").on("click", ".toggle-modal", function() {
  /* Check if modal is open */
  if ($(".modal").is(":visible")) {
    /* if modal is already visible close it out */
    $(".modal").fadeOut("fast", function() {
      $(this).remove()
    });
  } else {
    /* Get message from button */
    const msg = $(this).data("modal-text");

    /* dynamically create modal elements */
    const modal = $("<div />", {
        "class": "modal"
      }).append(
        $("<div />", {
          "class": "modal-overlay toggle-modal"
        }),
        $("<div />", {
          "class": "modal-container"
        }).append(
          $("<div />", {
            "class": "modal-close toggle-modal"
          }),
          $("<div />", {
            "class": "modal-content"
          }).text(msg) /* Append text to modal */
        )
      ).appendTo("body") /* Append modal to body */
      .fadeIn("fast") /* Fade in modal */
      .css("display", "flex") /* Flexbox to center content */
  }

})

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: cyan;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  padding: 20px;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, .8);
  cursor: pointer;
}

.modal-container {
  background: white;
  margin: auto;
  position: relative;
  font-size: 16px;
  line-height: normal;
  text-align: center;
  font-weight: bold;
  z-index: 20;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  font-family:sans-serif;
  font-size:14px;
  line-height:1;
  overflow: hidden;
  cursor: pointer;
  padding: 8px 20px;
  background: coral;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-close:before {
  content: "X"
}

.modal-content {
  padding: 35px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- Set the modal text right in the data attribute of the button. This approach works for short messages but may not be well suited for more complex content -->

<div>
  <button class="toggle-modal" data-modal-text="Short message to be displayed in the first modal">Click Here</button>

  <button class="toggle-modal" data-modal-text="A different message for the secondary modal">Click Here</button>
</div>

如何在 HTML 中的不同模态框内显示不同的值

How to show different values inside different Modals in HTML

html

css

modal-dialog