Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2020, 20:43
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Как сделать, чтобы при появлении всплывающего окна страница скролилась к якорю?
Здравствуйте. Помогите, пожалуйста решить вопрос, как сделать так, чтобы страница скролилась к якорю не сразу после клика по ссылке, а только после появления всплывающего окна, которое появляется только если юзер заполнил необходимое поле.

<input id="inp" class="name" autocomplete="name" name="name" placeholder="Ваше имя" required />
 
 
    <a href="#scroll"><button id="openwindow">Отправить</button></a>
 
    <div id="window9">  
        <p>Содержимое окна</p>
        <button onclick="show('none')" id="closewindow9">X</button>
    </div>
        
<div id="scroll"></div>


"use strict";
 
        let inp = document.getElementById("inp");
 
        inp.addEventListener("mousedown", () => {
            inp.classList.remove("isNotValid");
        });
        
        inp.addEventListener("blur", valid.bind(null, inp));
 
        document.getElementById("openwindow").addEventListener("click", () => {
            if (!valid(inp)) return false;
            show("block");
 
        });
 
        function valid(inp) {
            if (!inp.value) {
                inp.classList.add("isNotValid");
                return false;
            }
            return true;
        }
 
        function show(state) {
          // if (state === "block") {
          //   timer = window.setTimeout(move, 0);
          // } else {
          //   clearTimeout(timer);
          // }
          document.getElementById('window9').style.display = state;
          // document.getElementById('wrap9').style.display = state;
          
        }


Код:
                #wrap9 {
                    display: none;
                    opacity: 0.5;
                    position: fixed;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background-color: rgba(255, 255, 255, 1);
                    z-index: 100;
                    overflow: auto;
                }
                
                #window9 {
                    width: 500px;
                    height: 300px;
                    margin: auto;
                    display: none;
                    background: #fff;
                    border: 1px solid #365E97;
                    z-index: 200;
                    position: fixed;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    padding: 15px 30px 30px 30px;
                    vertical-align:middle;
                    -webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
                    box-shadow:0 5px 15px rgba(0,0,0,.5);
                }
         
         
                #closewindow9 {
                    background-color: red;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
                
                .name {
                     border: 1px solid #eeeeee;
                }
 
                .isNotValid {
                    background-color: red;
                }
                
#scroll {
background-color: #dddddd;
padding: 300px 100px 300px 100px;
margin-top: 600px;
}
Ответить с цитированием
  #2 (permalink)  
Старый 03.04.2020, 21:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Lefseq,
document.getElementById("openwindow").addEventListener("click", event => {
            if (!valid(inp)) {
            event.preventDefault();
            return false;
            }
            show("block");
        });
Ответить с цитированием
  #3 (permalink)  
Старый 04.04.2020, 08:58
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

рони,
Большое спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы при наведении мыши на 1-ин елемент 2-ой становился темнне JS nathan111777 Общие вопросы Javascript 8 15.05.2019 15:41
как сделать чтобы при наведении draggable элемента раскрывалась категория rozmarin jQuery 0 29.08.2013 07:32
Как сделать чтобы не закрывать актиыный див при открытии другого дива dimas15 Общие вопросы Javascript 53 21.08.2012 23:27
как сделать чтобы страница не обновлялась? teles Общие вопросы Javascript 5 25.05.2012 11:20
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19