主页 / user-534913

Artem Criticall Metr's questions

Martin Hope
Artem Criticall Metr
Asked: 2023-01-08 18:58:32 +0000 UTC
  • 5

亲爱的开发人员）请通过向模态窗口和按钮添加变量来帮助正确缩短 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
Martin Hope
Artem Criticall Metr
Asked: 2023-01-08 04:01:13 +0000 UTC
  • 5

一般来说，有一个Modal-window代码，当某个按钮被按下时，它会从下方顺利离开。当您单击窗口外的区域时它会隐藏。问题是它顺利离开，却突然躲起来..帮我细化这部分代码，让一切顺利漂亮）

// Переменные для окон
var modal = document.getElementById('myModal');

// Переменные для кнопок
var btn = document.getElementById("myBtn");
// Когда нажимаешь кнопку-открытие окна 
btn.onclick = function() {
  modal.style.display = "block";
}
// Закрыть окно при нажатии в любом месте
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
  .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.85);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.3s;
    animation-name: fadeIn;
    animation-duration: 0.3s
  }
  .modal-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fefefe;
    border-radius: 15px 15px 0px 0px;
    width: auto;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.3s;
    animation-name: slideIn;
    animation-duration: 0.3s
  }
  .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;
  }
  @-webkit-keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bb3">
  <button class="profile-button2" id="myBtn">
            <div>
                <img src="img/ico/more.png">
            </div>
    </button>
</div>


<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3>Профиль</h3>
    </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>

javascript
Martin Hope
Artem Criticall Metr
Asked: 2022-12-22 16:32:34 +0000 UTC
  • 5

告诉一个新手程序员，他的腿妈妈，如何在再次按下点击时正确实现取消动作？附上示例代码

$(document).ready(function() {

  var musplmini, musicphotomini, nameplayedtrack, openplayer;

  jQuery('.openplayer').on('click', function() {
    musplmini = jQuery('.musplmini').animate({
      height: "400px"
    })
    musicphotomini = jQuery('.musicphotomini').animate({
      top: '20px',
      left: '50px',
      height: '150px',
      width: '150px',
      borderRadius: '150px'
    })
    nameplayedtrack = jQuery('.nameplayedtrack').animate({
      top: '240px',
      left: '5px',
      height: '40px',
      width: '240px',
      fontSize: '16px'
    })
    openplayer = jQuery('.openplayer').animate({
      top: '383px'
    });
  });
});
/* Плеер мини */

.musplmini {
  position: fixed;
  top: 41px;
  width: 250px;
  height: 40px;
  right: 100px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
  ;
  border-radius: 0px 0px 15px 15px;
}


/* Обложка трека */

.musicphotomini {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 10px;
  border-radius: 25px;
  overflow: hidden;
  animation: 5s linear 0s normal none infinite running rot;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Название трека */

.nameplayedtrack {
  position: absolute;
  width: 190px;
  height: 20px;
  top: 5px;
  left: 50px;
  color: #000000b4;
  font-size: 12px;
  text-align: center;
}


/* раскрыть плеер */

.openplayer {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 38px;
  left: 115px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="musplmini">
  <div class="openplayer">
    <img src="img/ico/ico-open-player.png"></div>
  <section class="musicphotomini">
    <img src="img/pic.png"></section>
  <span class="nameplayedtrack">
            David Guetta and Bebe Rexha - I'm Good (Blue)
        </span>

</div>

jquery