主页 / 问题 / 1484556
Accepted
Artem Criticall Metr
Asked:2023-01-08 18:58:32 +0000 UTC2023-01-08 18:58:32 +0000 UTC

通过添加变量帮助适当缩短 JS 代码

  • 772

亲爱的开发人员）请通过向模态窗口和按钮添加变量来帮助正确缩短 JS 代码。我是破解高手，所以我解决这个问题的尝试归结为不是技巧，而是破解代码（（我将不胜感激）有一种适用于所有窗口的模态窗口样式，并且有窗口本身（总共 4 个，但在未来，可能会添加更多，但这并不确定）并且有一些按钮可以打开这些窗口（也是 4 个，这是合乎逻辑的），正如您已经注意到的，我使用最手工的方法制作它们，但相应地它会大量加载页面。将其减少到最低限度，但将来可能会添加新变量

function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function openNav2() {
  document.getElementById("myNav2").style.height = "100%";
}

function openNav3() {
  document.getElementById("myNav3").style.height = "100%";
}

function openNav4() {
  document.getElementById("myNav4").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

function closeNav2() {
  document.getElementById("myNav2").style.height = "0%";
}

function closeNav3() {
  document.getElementById("myNav3").style.height = "0%";
}

function closeNav4() {
  document.getElementById("myNav4").style.height = "0%";
}
// Закрыть окно при нажатии в любом месте
window.onclick = function(event) {
  if (event.target == myNav) {
    myNav.style.height = "0%";
  }
  if (event.target == myNav2) {
    myNav2.style.height = "0%";
  }
  if (event.target == myNav3) {
    myNav3.style.height = "0%";
  }
  if (event.target == myNav4) {
    myNav4.style.height = "0%";
  }
}
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0, 0, 0, 0.85);
  overflow: auto;
  transition: 0.5s;
}

.overlay-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fefefe;
  border-radius: 15px 15px 0px 0px;
  width: auto;
}

.modal-header {
  padding: 2px 15px;
  background: transparent;
  color: black;
}

.line {
  display: flex;
  width: auto;
  margin: 10;
  border: 1px solid gainsboro;
}

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

.modal-params {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  width: auto;
  height: auto;
}

.params {
  vertical-align: middle;
  color: rgb(0, 0, 0);
  font-size: 16px;
  font-weight: lighter;
  align-items: center;
  margin: 10;
  width: auto;
  height: 20px;
  cursor: pointer;
}

.params>img {
  vertical-align: middle;
  margin-right: 10;
  width: 20;
  height: 20;
}

.closebtn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.closebtn>div>img {
  width: 16;
  height: 16;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="profile-button2" onclick="openNav()">
                <div>
                    <img src="img/ico/more.png"> Инфо
                </div>
            </button>

<button class="profile-button2" onclick="openNav2()">
                <div>
                    <img src="img/ico/added.png">Друг
                </div>
 </button>

<button class="profile-button2" onclick="openNav3()">
            <div><img src="img/ico/marker.png"> Город</div>
        
</button>
<button class="wall-button" onclick="openNav4()">
            <div><img src="img/ico/upload.png"></div> 
            <div>Загрузить медиа</div>
        </button>

<!-- The Modal -->
<div id="myNav" class="overlay">
  <div class="overlay-content">
    <div class="modal-header">
      <h3>Профиль</h3>
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
        <div><img src="img/ico/close.png"></div>
      </a>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/editing.png">Редактировать профиль</div>
        <div class="params"><img src="img/ico/camera.png">Изменить фото</div>
        <div class="params"><img src="img/ico/picture.png">Изменить обложку</div>
        <div class="line"></div>

        <div class="params"><img src="img/ico/lock.png">Конфиденциальность</div>
        <div class="params"><img src="img/ico/setting.png">Настройки профиля</div>
      </div>
    </div>
  </div>
</div>

<div id="myNav2" class="overlay">
  <div class="overlay-content">
    <div class="modal-header">
      <h3>Настройки друга</h3>
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">
        <div><img src="img/ico/close.png"></div>
      </a>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/remove-friend.png">Удалить друга</div>
        <div class="line"></div>
        <div class="params"><img src="img/ico/share-link.png">Поделиться</div>
        <div class="params"><img src="img/ico/copy.png">Копировать ссылку</div>
        <div class="line"></div>
        <div class="params"><img src="img/ico/sign.png">Жалоба</div>
        <div class="params"><img src="img/ico/do-not-disturb.png">Заблокировать</div>

      </div>
    </div>
  </div>
</div>
<div id="myNav3" class="overlay">
  <div class="overlay-content">
    <div class="modal-header">
      <h3>Подробная информация</h3>
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav3()">
        <div><img src="img/ico/close.png"></div>
      </a>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/web-link.png"><a href="https://alfasamec.com">alfasamec.com</a></div>
        <div class="params"><img src="img/ico/mail.png"><a href="mailto:alfasamec@webref.com">alfasamec@webref.com</a></div>
        <div class="line"></div>
        <div class="params"><img src="img/ico/birthday-cake.png">День рождения: 28.07.1993 г.</div>
        <div class="params"><img src="img/ico/city.png">Город: Харьков</div>

      </div>
    </div>
  </div>
</div>
<div id="myNav4" class="overlay">
  <div class="overlay-content">
    <div class="modal-header">
      <h3>Что Вы хотите загрузить?</h3>
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav4()">
        <div><img src="img/ico/close.png"></div>
      </a>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/image.png">Загрузить фото</div>
        <div class="params"><img src="img/ico/video.png">Загрузить видео</div>
        <div class="params"><img src="img/ico/music.png">Загрузить музыку</div>

      </div>
    </div>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    首先，您可以通过以这种方式将它们组合成一个来重做打开模态的功能：

    <button class="profile-button2" onclick="openNav('myNav')">...</button>
<button class="profile-button2" onclick="openNav('myNav2')">...</button>
....

// Просто передаём в качестве аргумента нужный айдишник
function openNav(id) {
  document.getElementById(id).style.height = "100%";
}

    类比重做modals的关闭函数

    function openNav(id) {
  document.getElementById(id).style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

function closeNav2() {
  document.getElementById("myNav2").style.height = "0%";
}

function closeNav3() {
  document.getElementById("myNav3").style.height = "0%";
}

function closeNav4() {
  document.getElementById("myNav4").style.height = "0%";
}
// Закрыть окно при нажатии в любом месте
window.onclick = function (event) {
  if (event.target == myNav) {
    myNav.style.height = "0%";
  }
  if (event.target == myNav2) {
    myNav2.style.height = "0%";
  }
  if (event.target == myNav3) {
    myNav3.style.height = "0%";
  }
  if (event.target == myNav4) {
    myNav4.style.height = "0%";
  }
};
    .overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0, 0, 0, 0.85);
  overflow: auto;
  transition: 0.5s;
}

.overlay-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fefefe;
  border-radius: 15px 15px 0px 0px;
  width: auto;
}

.modal-header {
  padding: 2px 15px;
  background: transparent;
  color: black;
}

.line {
  display: flex;
  width: auto;
  margin: 10;
  border: 1px solid gainsboro;
}

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

.modal-params {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  width: auto;
  height: auto;
}

.params {
  vertical-align: middle;
  color: rgb(0, 0, 0);
  font-size: 16px;
  font-weight: lighter;
  align-items: center;
  margin: 10;
  width: auto;
  height: 20px;
  cursor: pointer;
}

.params>img {
  vertical-align: middle;
  margin-right: 10;
  width: 20;
  height: 20;
}

.closebtn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.closebtn>div>img {
  width: 16;
  height: 16;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <button class="profile-button2" onclick="openNav('myNav')">
    <div>
      <img src="img/ico/more.png"> Инфо
    </div>
  </button>

  <button class="profile-button2" onclick="openNav('myNav2')">
    <div>
      <img src="img/ico/added.png">Друг
    </div>
  </button>

  <button class="profile-button2" onclick="openNav('myNav3')">
    <div><img src="img/ico/marker.png"> Город</div>

  </button>
  <button class="wall-button" onclick="openNav('myNav4')">
    <div><img src="img/ico/upload.png"></div>
    <div>Загрузить медиа</div>
  </button>

  <!-- The Modal -->
  <div id="myNav" class="overlay">
    <div class="overlay-content">
      <div class="modal-header">
        <h3>Профиль</h3>
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
          <div><img src="img/ico/close.png"></div>
        </a>
      </div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><img src="img/ico/editing.png">Редактировать профиль</div>
          <div class="params"><img src="img/ico/camera.png">Изменить фото</div>
          <div class="params"><img src="img/ico/picture.png">Изменить обложку</div>
          <div class="line"></div>

          <div class="params"><img src="img/ico/lock.png">Конфиденциальность</div>
          <div class="params"><img src="img/ico/setting.png">Настройки профиля</div>
        </div>
      </div>
    </div>
  </div>

  <div id="myNav2" class="overlay">
    <div class="overlay-content">
      <div class="modal-header">
        <h3>Настройки друга</h3>
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">
          <div><img src="img/ico/close.png"></div>
        </a>
      </div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><img src="img/ico/remove-friend.png">Удалить друга</div>
          <div class="line"></div>
          <div class="params"><img src="img/ico/share-link.png">Поделиться</div>
          <div class="params"><img src="img/ico/copy.png">Копировать ссылку</div>
          <div class="line"></div>
          <div class="params"><img src="img/ico/sign.png">Жалоба</div>
          <div class="params"><img src="img/ico/do-not-disturb.png">Заблокировать</div>

        </div>
      </div>
    </div>
  </div>
  <div id="myNav3" class="overlay">
    <div class="overlay-content">
      <div class="modal-header">
        <h3>Подробная информация</h3>
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav3()">
          <div><img src="img/ico/close.png"></div>
        </a>
      </div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><img src="img/ico/web-link.png"><a href="https://alfasamec.com">alfasamec.com</a></div>
          <div class="params"><img src="img/ico/mail.png"><a href="mailto:alfasamec@webref.com">alfasamec@webref.com</a>
          </div>
          <div class="line"></div>
          <div class="params"><img src="img/ico/birthday-cake.png">День рождения: 28.07.1993 г.</div>
          <div class="params"><img src="img/ico/city.png">Город: Харьков</div>

        </div>
      </div>
    </div>
  </div>
  <div id="myNav4" class="overlay">
    <div class="overlay-content">
      <div class="modal-header">
        <h3>Что Вы хотите загрузить?</h3>
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav4()">
          <div><img src="img/ico/close.png"></div>
        </a>
      </div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><img src="img/ico/image.png">Загрузить фото</div>
          <div class="params"><img src="img/ico/video.png">Загрузить видео</div>
          <div class="params"><img src="img/ico/music.png">Загрузить музыку</div>

        </div>
      </div>
    </div>
  </div>

    • 0

相关问题