StillMaster » Веб разработка » Как сделать чтоб модальное окно можно было двигать.

Как сделать чтоб модальное окно можно было двигать.
Как сделать чтоб модальное окно можно было двигать.

Для этого мы будем использовать JS, HTML и CSS.

Прошлый раз мы уже создали модальное окно, а теперь мы сделаем так, чтобы это окно можно было сдвинуть с помощью мышки в любое место экрана.

Сначала мы добавим HTML разметку.

<div id="mydiv">

        <div id="mydivheader">Наведите сюда чтоб двигать

            <span class="cloze">&times;</span></div>
            <p>Здесь нужные вам данные</p>
          </div>

        

Окно не обязательно должно быть всплывающим попробуйте подвигать блок ниже и он будет двигаться.

Наведите сюда чтоб двигать

Здесь нужные вам данные


Затем нам нужно задать стили для нашей формы. Единственный важный стиль position: absolute, остальное зависит от вас:

#mydiv {
 background: #333333 ; height: 162px; width: 100%; max-width: 390px; position: absolute;
}

#mydivheader {
 background: black; padding: 10px; text-transform: uppercase; text-align: center; cursor: move; display: flex;  align-items: center; justify-content: space-between;
}

Далее мы добавим в наш файл JS код ниже.

// Сделайте элемент DIV перетаскиваемым:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // если присутствует, заголовок - это место, откуда вы перемещаете DIV:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // в противном случае переместите DIV из любого места внутри DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // получить положение курсора мыши при запуске:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // вызов функции при каждом перемещении курсора:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // вычислить новую позицию курсора:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // установите новое положение элемента:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // остановка перемещения при отпускании кнопки мыши:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

Нажмите чтобы проверить как будет работать модальное окно.

Наведите сюда чтоб двигать ×

Здесь нужные вам данные


GeekBrains

GeekBrains

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .


Поделиться:

304 09.02.23