css 一页上的多个模态仅显示1个模态

qojgxg4l 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(148)

这可能是一个重复，但我不能弄清楚这一点。我不能弄清楚为什么相同的模态是显示两个按钮。我试图使每一个模态单独的类，但没有工作。

// emailmodal.js
var emailModal = document.getElementById("email-modal");
var emailBtn = document.getElementById("email");
var emailSpan = document.getElementsByClassName("email-close")[0];

emailBtn.onclick = function() {
  emailModal.style.display = "block";
}

emailSpan.onclick = function() {
  emailModal.style.display = "none";
}

window.onclick = function(event) {
  if (event.taget == emailModal) {
    emailModal.style.display = "none";
  }
}

// phonemodal.js
var phoneModal = document.getElementById("phone-modal");
var phoneBtn = document.getElementById("phone");
var phoneSpan = document.getElementsByClassName("phone-close")[0];

phoneBtn.onclick = function() {
  phoneModal.style.display = "block";
}

phoneSpan.onclick = function() {
  phoneModal.style.display = "none";
}

window.onclick = function(event) {
  if (event.taget == phoneModal) {
    phoneModal.style.display = "none";
  }
}

.fa {
  padding: 80px;
  font-size: 50px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 10px 10px;
  border-radius: 10%;
  color: white;
  transition: 0.7s;
}

.fa-envelope-o {
  background: #199cad;
}

.fa-phone {
  background: #121e88;
}

.container {
  text-align: center;
  padding: 50px;
}

.middle-colour {
  color: #00ffff;
}

.email-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.phone-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.socials-modal-content {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 25%;
  color: white;
  font-size: 20px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #888888;
  text-decoration: none;
  cursor: pointer;
}

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="styles/contact.css">
</head>

<body>
  <div class="main">
    <div class="container">
      <div class="socials-3">
        <a class="fa fa-envelope-o" id="email" href="#Email"></a>
        <div id="email-modal" class="email-modal">
          <div class="socials-modal-content">
            <span class="close email-close">&times;</span>
            <p>fun<span class="middle-colour">@</span>wbf<span class="middle-colour">.</span>com</p>
          </div>
          <script src="js/emailmodal.js"></script>
        </div>
        <a class="fa fa-phone" id="phone" href="#Phone"></a>
        <div id="phone-modal" class="phone-modal">
          <div class="socials-modal-content">
            <span class="close phone-close">&times;</span>
            <p>01234567890</p>
          </div>
          <script src="js/phonemodal.js"></script>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

这可能是一些简单的东西，但如果有人能找到这个问题将是一个很大的帮助。
编辑：将代码更改为片段。

css

来源：https://stackoverflow.com/questions/75341991/multiple-modals-on-one-page-only-showing-1-modal

2条答案

按热度按时间

uxh89sit1#

试着给你的phone元素变量赋予它们的phone元素等价物，现在它们都引用email元素。
例如，更改以下内容：

var phoneModal = document.getElementById("email-modal");
var phoneBtn = document.getElementById("email");
var phoneSpan = document.getElementsByClassName("email-close")[0];

改为：

var phoneModal = document.getElementById("phone-modal");
var phoneBtn = document.getElementById("phone");
var phoneSpan = document.getElementsByClassName("phone-close")[0];

编辑 *

您还存在多处拼写错误：event.taget应该是event.target，并且您可能希望使用严格相等（===）而不是正常相等（==）。
Here's a working example基于您的代码。

赞(0）回复(0）举报 2023-02-06

xdnvmnnf2#

你可以在CSS文件中修改socials-modal-content的样式，例如，定义email和phone两个类，如下所示：

.socials-modal-content-email {
    background-color: rgb(100, 800, 0);
    background-color: rgba(0, 0, 0, 0.4);
    margin: 15% auto;
    padding: 20px;
    border: 10px solid #888;
    width: 25%;
    color: green;
    font-size: 30px;
}

.socials-modal-content-phone {
    background-color: rgb(1, 0, 0);
    background-color: rgba(1, 0, 0, 0.4);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 25%;
    color: white;
    font-size: 20px;
}

然后在您的HTML文件中将它们都像这样传播：

<div class="socials-modal-content-email">
<div class="socials-modal-content-phone">

总的来说，你可以编辑和合并你的HTML和JS：

<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles/contact.css">
</head>

<body>
<div class="main">
    <div class="container">
        <div class="socials-3">
            <a class="fa fa-envelope-o"  onclick="show_email()" id="email" href="#Email"></a>
              <div id="email-modal" class="email-modal">
                <div class="socials-modal-content-email">
                    <span class="close email-close" onclick="close_eamil()">&times;</span>
                    <p>fun<span class="middle-colour">@</span>wbf<span class="middle-colour">.</span>com</p>
                </div>
            </div>
            <a class="fa fa-phone" id="phone" onclick="show_phone()" href="#Phone"></a>
              <div id="phone-modal"  class="phone-modal">
                <div class="socials-modal-content-phone">
                    <span class="close phone-close" onclick="close_phone()">&times;</span>
                    <p>01234567890</p>
                </div>
            </div>
        </div>
    </div>-
</div>
</body>

</html>
<script  type="text/javascript" >
    var emailModal = document.getElementById("email-modal");
    var phoneModal = document.getElementById("phone-modal");
    function show_email(){
        emailModal.style.display = "block";
    }
    function close_eamil(){
        emailModal.style.display = "none";
    }
    function show_phone(){
        phoneModal.style.display = "block";
    }
    function close_phone(){
        phoneModal.style.display = "none";
    }


</script>

赞(0）回复(0）举报 2023-02-06

我来回答

css 一页上的多个模态仅显示1个模态

2条答案

相关问题

热门标签

最新问答