javascript - 如何实现全响应？

问题描述

我设计了一个包含四个部分的 HTML 页面，并且还有模态弹出功能。我已经尝试了很多来实现响应能力，但我不明白如何做到这一点。不知何故，我实现了平板电脑视图，但是在使窗口选项卡变小和变大的同时，它看起来也不合适，而且在模式弹出窗口中内容看起来也不合适。请给我一些想法来实现这一目标。下面是我的代码

var modal1 = document.getElementById("myModal1");

// Get the button that opens the modal1
var btn1 = document.getElementById("btn1");

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

var modal2 = document.getElementById("myModal2");

// Get the button that opens the modal2
var btn2 = document.getElementById("btn2");

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

var modal3 = document.getElementById("myModal3");

// Get the button that opens the modal3
var btn3 = document.getElementById("btn3");

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

var modal4 = document.getElementById("myModal4");

// Get the button that opens the modal4
var btn4 = document.getElementById("btn4");

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



// When the user clicks the button, open the modal 
function handlefacebookmodal() {
  if(modal1.style.display != "block"){
    modal1.style.display = "block";
    modal2.style.display = "none";
    modal3.style.display = "none";
    modal4.style.display = "none";
  }else{
    modal1.style.display = "none";
  }
}


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

// When the user clicks the button, open the modal 
function handleinstamodal() {
  if(modal2.style.display != "block"){
    modal2.style.display = "block";
    modal1.style.display = "none";
    modal3.style.display = "none";
    modal4.style.display = "none";
  }else{
    modal2.style.display = "none";
  }
}

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

// When the user clicks the button, open the modal 3
function handlewhatsappmodal() {
  if(modal3.style.display != "block"){
    modal3.style.display = "block";
    modal2.style.display = "none";
    modal1.style.display = "none";
    modal4.style.display = "none";
  }else{
    modal3.style.display = "none";
  }
}

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

// When the user clicks the button, open the modal 4
function handletwittermodal() {
  if(modal4.style.display != "block"){
    modal4.style.display = "block";
    modal2.style.display = "none";
    modal3.style.display = "none";
    modal1.style.display = "none";
  }else{
    modal4.style.display = "none";
  }
}

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

window.addEventListener('click', function(e){
  if(btn1.contains(e.target)){
    handlefacebookmodal();
  }else if(btn2.contains(e.target)){
    handleinstamodal();
  }else if(btn3.contains(e.target)){
    handlewhatsappmodal();
  }else if(btn4.contains(e.target)){
    handletwittermodal();
  }else{
    modal1.style.display = "none";
    modal2.style.display = "none";
    modal3.style.display = "none";
    modal4.style.display = "none";
  }
});

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

button{
  width: 50%;
  height: 50%;
  float: left;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  position: relative;
}

button span {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: 'Ubuntu',sans-serif;
  font-size: 70px;
  color: transparent;
}

button img{
  width: 100%;
  height: 100%;
}

button:hover img{
  opacity: 0.4;
}

button:hover span{
  color: darkblue;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 50%;
  height: 50%;
  border: 0;
}

.modal-content1 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 68%;
  border-radius: 7px;
}

.modal-content2 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 68%;
  border-radius: 7px;
}

.modal-content3 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 75%;
  border-radius: 7px;
}

.modal-content4 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 64%;
  border-radius: 7px;
}

#close {
  position: absolute;
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  top: 1px;
  right: 1px;
  background-color: lightgray;
}

#close:hover,
#close:focus {
  background-color: darkgray;
}

p, img{
  display: flex;
}

img{
  float: left;
  width: 45%;
  padding: 0;
  margin: 0;
}

p{
  float: right;
  text-align: justify;
  width: 50%;
  padding: 0;
  margin: 0;
  font-size: 20px;
}


@media (min-width: 320px) and (max-width: 767px){

}
@media (min-width: 768px) and (max-width: 1023px){
  button span{
    font-size: 30px;
    color: darkblue;
  }

  button img{
    opacity: 0.4;
  }

  .modal{
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    top: 0;
    border: 0;
  }

  #modal-content{
    margin-left: 65%;

  }

  .modal-content1 {
    margin-top: 36%; 
  }

  .modal-content2 {
    margin-top: 36%; 
  }

  .modal-content3 {
    margin-top: 37%; 
  }

  .modal-content4 {
    margin-top: 37.3%; 
  }

  p{
    font-size: 15px;
    overflow-x: scroll;
  }  

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Nature</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button id="btn1"><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Himalaya</span></button>

    <div id="myModal1" class="modal">
      <div id="modal-content" class="modal-content1">
        <span id="close" class="close1">x</span>
        <img src="https://images.unsplash.com/photo-1577516311194-eb14c570a137?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="image">
        <p id="content">
          The Himalayas are a mountain range in South Asia The Himalayas are a mountain range in South Asia.The west end is in Pakistan. They run through Jammu and Kashmir, Himachal Pradesh,Uttaranchal, Sikkim and Arunachal Pradesh states in India, Nepal, and Bhutan. The east end is in the south of Tibet. They are divided into 3 parts Himadri, Himachal and Shiwaliks.The 15 highest mountains in the world are in the Himalayas. 
        </p>
      </div>
    </div>

    <button id="btn2"><img src="https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Waterfall</span></button>

    <div id="myModal2" class="modal">
      <div id="modal-content" class="modal-content2">
        <span id="close" class="close2">x</span>
        <img src="https://images.unsplash.com/photo-1493713838217-28e23b41b798?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="image">
        <p id="content">
          Waterfalls are commonly formed in the upper course of a river where lakes fall into in steep mountains. Because of their landscape position, many waterfalls occur over bedrock fed by little contributing area, so they may be ephemeral and flow only during rainstorms or significant snowmelt. The further downstream, the more perennial a waterfall can be. Waterfalls can have a wide range of widths and depths.
        </p>
      </div>
    </div>

    <button id="btn3"><img src="https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""><span>Raigad</span></button>

    <div id="myModal3" class="modal">
      <div id="modal-content" class="modal-content3">
        <span id="close" class="close3">x</span>
        <img src="https://mapio.net/images-p/122383921.jpg" id="image">
        <p id="content">
          Raigad is a hill fort situated in Mahad, Raigad district of Maharashtra, India. The Raigad Fort, formerly known as Rairi, was built by Chandraraoji More, the King of Jawali, who was then seized by Shivaji Maharaj who made it his capital in 1674 when he was crowned the King of the Maratha Kingdom which later developed into the Maratha Empire, eventually covering much of western and central India. The fort rises 820 metres above the sea level and is located in the Sahyadri mountain range.
        </p>
      </div>
    </div>

    <button id="btn4"><img src="https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""><span>Lake</span></button>

    <div id="myModal4" class="modal">
      <div id="modal-content" class="modal-content4">
        <span id="close" class="close4">x</span>
        <img src="https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1144&q=80" id="image">
        <p id="content">
          A lake is an area filled with water, localized in a basin, surrounded by land, apart from any river or other outlet that serves to feed or drain the lake. Lakes lie on land and are not part of the ocean. Therefore, they are distinct from lagoons, and are also larger and deeper than ponds, though there are no official or scientific definitions. Lakes can be contrasted with rivers or streams, which are usually flowing. Natural lakes are generally found in mountainous areas.
        </p>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

标签： javascripthtmlcssresponsive-designmodalpopup

javascript - 如何实现全响应？

问题描述

解决方案

推荐阅读