0
HTML

  <input type="button" value="LEARN MORE" id="lm_button" 
     onclick="PopupWindow1()">
            <div id="mypopup" class="popup">
                <div class="popup_content">
                    <div class="popup_header">
                        <h2>popup Header</h2>
                        <span class="close">&times;</span>
                    </div>
                    <div class="popup_body">
                        <p>Lorem ipsum dolor sit amet.</p>
                        <p>Lorem ipsum dolor.</p>
                    </div>
                    <div class="popup_footer"></div>
                </div>
            </div>

CSS

    .popup{
    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); }



    .close{
    cursor: #aaa;
    font-size: 28px;
    font-weight: bold;
    margin-left: auto; }



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

   .popup_header{
    background-color: #5c82b8;
    color: white;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    padding: 2px 16px; }

  .popup_body{
    padding: 2px 16px }

  .popup_footer{
    padding: 2px 16px;
    background-color: #5c82b8;
    color: white;}

 .popup_content{
    position: relative
    background-color: #fefe;
    margin: auto;
    padding: 0;
    border:1px solid #888;
    width: 80%;
    box-shadow:  0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) }

JS

function PopupWindow1(){
var mypopup = getElementsById("mypopup")
if(mypopup.style.display === "none" ){
    mypopup.style.display ="block"
}

else{
    mypopup.style.display ="none"

}

}

Никак не могу понять, в чем проблема, файл с JS нормально подключен, вроде и через getElementByClassName пытался сделать, и функцию создавал через mypopup.onclick. Но все бесполезно, в чем моя ошибка?

3
  • document. getElementById("mypopup")
    – user176262
    28 ноя 2019 в 16:35
  • Не помогло, видимо есть ещё косяки, помимо этого
    – Alex
    28 ноя 2019 в 16:36
  • В JS: Рекомендую поставить везде в конце всех строчек кроме тех мест где закрываются или открываются фигурные скобки точку с запятой, и уберите лишний пробел в else. Это хоть и, скорее всего, не исправит проблему, но это правильный синтаксис JS, и я советую вам его придерживаться. Насчет ошибки, поддерживаю вариант выше, вместо GetElement - GetElements.
    – Xij
    28 ноя 2019 в 16:39

2 ответа 2

1

Нет функции getElementsById. Откройте консоль разработчика (f12), сразу станет легче отлаживать.

1

function PopupWindow1() {
  var mypopup = document.getElementById("mypopup");
  var style = getComputedStyle(mypopup);
  if (style.display != "none") {
    mypopup.style.display = "none";
  } else {
    mypopup.style.display = "block";
  }  
}
.popup {
  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);
}

.close {
  cursor: #aaa;
  font-size: 28px;
  font-weight: bold;
  margin-left: auto;
}

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

.popup_header {
  background-color: #5c82b8;
  color: white;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding: 2px 16px;
}

.popup_body {
  padding: 2px 16px
}

.popup_footer {
  padding: 2px 16px;
  background-color: #5c82b8;
  color: white;
}

.popup_content {
  position: relative background-color: #fefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
<input type="button" value="LEARN MORE" id="lm_button" onclick="PopupWindow1()">
<div id="mypopup" class="popup">
  <div class="popup_content">
    <div class="popup_header">
      <h2>popup Header</h2>
      <span class="close" onclick="PopupWindow1()">&times;</span>
    </div>
    <div class="popup_body">
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor.</p>
    </div>
    <div class="popup_footer"></div>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.