不知道怎么用 Javascript 和 html + css 来做答案

【问题标题】：Don't know how to do it with Javascript and maybe html + css不知道怎么用 Javascript 和 html + css 来做
【发布时间】：2017-04-29 21:40:19
【问题描述】：

所以我制作了一个带有文本的弹出窗口。当我只有''Biografi''时它可以工作，但是当我添加''Contact''时，我不知道如何使用javascript让''Biografi和''Contact''有两个不同的弹出窗口.有人可以帮我吗？因为当我点击''Biografi''时，就像我点击''Contact''一样出现

var modal = document.getElementById('myModal');

            var btn = document.getElementById("myBtn");

            var span = document.getElementsByClassName("close")[0];

            btn.onclick = function() {
              modal.style.display = "block";
            }

            span.onclick = function() {
              modal.style.display = "none";
            }

            window.onclick = function(event) {
              if (event.target == modal) {
                  modal.style.display = "none";
              }
            }
            
var modal = document.getElementById('myModal1');

            var btn = document.getElementById("myBtn1");

            var span = document.getElementsByClassName("close1")[0];

            btn.onclick = function() {
              modal.style.display = "block";
            }

            span.onclick = function() {
              modal.style.display = "none";
            }

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

              .text4 > a {
                text-decoration: underline;
                text-decoration-color: #fad184;
                text-decoration-style: dotted;
                color: #fad184;
              }

              .text4 > a:hover {
                opacity: 0.7;
              }

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

            .modal-content {
              position: relative;
              background-color: brown;
              color: #fad184;
              font-family: verdana;
              margin: auto;
              padding: 0;
              border: 1px solid #fff;
              width: 80%;
              box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
              -webkit-animation-name: animatetop;
              -webkit-animation-duration: 0.4s;
              animation-name: animatetop;
              animation-duration: 0.4s
            }

            @-webkit-keyframes animatetop {
              from {top:-300px; opacity:0}
              to {top:0; opacity:1}
            }

            @keyframes animatetop {
              from {top:-300px; opacity:0}
              to {top:0; opacity:1}
            }

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

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

            .modal-header {
              padding: 2px 16px;
              background-color: brown;
              color: #fad184;
            }

            .modal-body {padding: 2px 16px;}

            .modal-footer {
              padding: 2px 16px;
              background-color: brown;
              color: #fad184;
            }

<div class="div5">
  <p id="myBtn" class="text4"><a href="#">Biografi</a></p>
  <p id="myBtn1" class="text4"><a href="#">Contact</a></p>
  <p class="text4"><a href="#">hey</a></p>
  <p class="text4"><a href="#">hey</a></p>
  <p class="text4"><a href="#">hey</a></p>
</div>

<div id="myModal" class="modal">
              <div class="modal-content">
                <div class="div1">
                <div class="close1">&times;</div>
                  <div class="div2" style="margin-top:10px; margin-bottom:10px;">
                    <div class="div11">
                      <div class="div13">
                        <img src="ungeferrari1.jpg" class="img3">
                      </div>
                      <div class="div12">
                        <div style="margin-left:15px">
                          <p class="textbio1">Biografi:</p>
                          <p class="textbio2">25-åringen Unge Ferrari aka Stig J. Haugen er en norsk rapper fra Hamar i Norge.
                            Han vokste opp i et vanekslig miljø.
                          Som 8 åring begynte han å fatte interesse for rapping og starter og preformer i en alder av 16 år.</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
<div id="myModal1" class="modal">
              <div class="modal-content">
                <div class="div1">
                <div class="close">&times;</div>
                  <div class="div2" style="margin-top:10px; margin-bottom:10px;">
                    <div class="div11">
                      <div class="div13">
                        <img src="ungeferrari1.jpg" class="img3">
                      </div>
                      <div class="div12">
                        <div style="margin-left:15px">
                          <p class="textbio1">Biografi:</p>
                          <p class="textbio2">25-åringen Unge Ferrari aka Stig J. Haugen er en norsk rapper fra Hamar i Norge.
                            Han vokste opp i et vanekslig miljø.
                          Som 8 åring begynte han å fatte interesse for rapping og starter og preformer i en alder av 16 år.</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

【问题讨论】：

这和Java有什么关系？您确实知道 Java 与 JavaScript 完全不同，对吧？

标签： javascript html css

【解决方案1】：

你有多个问题。

我修复的主要问题是：

在两组处理程序中，您都提到了modal 变量——因为该变量一次只能是一件事。因此，我将两个按钮设置封装在函数中以封装本地 modal var 分配
您在两种模式中都有重复的内容，因此无论如何您都无法分辨出区别
您已在两个模式之间交换了关闭按钮。

此外，您确实需要重新考虑类和 ID 的命名约定。简单地将它们编号为div1、div2 等具有零语义含义——它不会轻易扩展或维护，如果你离开再回来也不容易记住。相反，请尝试对是和做的事物进行分类和标识——语义命名。

最后，请记住 Java 和 JavaScript 是不同的、不相关的语言。 :) 祝你好运！

function setupFirstBtn() {
    var modal = document.getElementById('myModal');

    var btn = document.getElementById("myBtn");

    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function() {
        modal.style.display = "block";
    }

    span.onclick = function() {
        modal.style.display = "none";
    }

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

function setupSecondBtn () { 
  var modal = document.getElementById('myModal1');

  var btn = document.getElementById("myBtn1");

  var span = document.getElementsByClassName("close1")[0];

  btn.onclick = function() {
      modal.style.display = "block";
  }

  span.onclick = function() {
      modal.style.display = "none";
  }

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

setupFirstBtn();
setupSecondBtn();

.text4 > a {
                text-decoration: underline;
                text-decoration-color: #fad184;
                text-decoration-style: dotted;
                color: #fad184;
              }

              .text4 > a:hover {
                opacity: 0.7;
              }

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

            .modal-content {
              position: relative;
              background-color: brown;
              color: #fad184;
              font-family: verdana;
              margin: auto;
              padding: 0;
              border: 1px solid #fff;
              width: 80%;
              box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
              -webkit-animation-name: animatetop;
              -webkit-animation-duration: 0.4s;
              animation-name: animatetop;
              animation-duration: 0.4s
            }

            @-webkit-keyframes animatetop {
              from {top:-300px; opacity:0}
              to {top:0; opacity:1}
            }

            @keyframes animatetop {
              from {top:-300px; opacity:0}
              to {top:0; opacity:1}
            }

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

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

            .modal-header {
              padding: 2px 16px;
              background-color: brown;
              color: #fad184;
            }

            .modal-body {padding: 2px 16px;}

            .modal-footer {
              padding: 2px 16px;
              background-color: brown;
              color: #fad184;
            }

<div class="div5">
  <p id="myBtn" class="text4"><a href="#">Biografi</a></p>
  <p id="myBtn1" class="text4"><a href="#">Contact</a></p>
  <p class="text4"><a href="#">hey</a></p>
  <p class="text4"><a href="#">hey</a></p>
  <p class="text4"><a href="#">hey</a></p>
</div>

<div id="myModal" class="modal">
              <div class="modal-content">
                <div class="div1">
                <div class="close">&times;</div>
                  <div class="div2" style="margin-top:10px; margin-bottom:10px;">
                    <div class="div11">
                      <div class="div13">
                        <img src="ungeferrari1.jpg" class="img3">
                      </div>
                      <div class="div12">
                        <div style="margin-left:15px">
                          <p class="textbio1">Biografi:</p>
                          <p class="textbio2">25-åringen Unge Ferrari aka Stig J. Haugen er en norsk rapper fra Hamar i Norge.
                            Han vokste opp i et vanekslig miljø.
                          Som 8 åring begynte han å fatte interesse for rapping og starter og preformer i en alder av 16 år.</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
<div id="myModal1" class="modal">
              <div class="modal-content">
                <div class="div1">
                <div class="close1">&times;</div>
                  <div class="div2" style="margin-top:10px; margin-bottom:10px;">
                    <div class="div11">
                      <div class="div13">
                        <img src="ungeferrari1.jpg" class="img3">
                      </div>
                      <div class="div12">
                        <div style="margin-left:15px">
                          <p class="textbio1">CONTACT:</p>
                          <p class="textbio2">CONTACTCONTACTCONTACT</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

【讨论】：