Implementation of offset, style and modal box in JavaScript

Keywords: Javascript html css

Learning objectives:

        1. Understand the common attributes, functions and usage of offset series

        2. The difference between offset and style

        3. offset usage case

        4. The modal box is implemented independently using offset

1. offset overview:

offset   The translation is the offset, which we use   offset   A series of related attributes can dynamically obtain the position (offset), size, etc. of the element

  • Gets the position of the element from the parent element with positioning

  • Gets the size (width, height) of the element itself

  • Note: all returned values do not have units

  • 2. The difference between offset and style

        3. offset small case

        Case study:

                < 1. We click in the box to get the distance from the mouse to the left and right of the box

                < 2. First, get the coordinates of the mouse on the page (e.pagex, e.pagey)

                < 3. Secondly, get the distance of the box in the page (box. Offsetleft, box. Offsettop)

                < 4. Coordinates of the mouse from the page - distance of the box in the page = coordinates of the mouse in the box

                < 5. If you need to move the mouse once, you need to obtain the latest coordinates and use the mouse to move the event   mousemove      

 <div class="box"></div>
    var box = document.querySelector('div');
    box.addEventListener('mousemove', function (e) {
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      this.innerHTML = 'x The coordinates are' + x + 'y The coordinates are' + y;


  Note: the output result is the position where the mouse cursor moves

4. Case: modal box drag

Pop up box, also known as modal box

Function introduction:

        < 1. Click the pop-up layer, the modal box will pop up, and the semi gray translucent occlusion layer will be displayed

        < 2. Click the close button to close the modal box and close the gray translucent occlusion layer at the same time

        < 3. Place the mouse on the top row of the modal box, and press and hold the mouse to drag the modal box to move on the page

        < 4. Release the mouse to stop dragging the modal box

Case study:
        < 1. Click the pop-up box, and the modal box and occlusion layer will be displayed, display: block;
        < 2. Click the close button and the modal box and mask layer will be hidden   display:none
        < 3. Principle of dragging and dropping in the page: Press and move the mouse, then release the mouse
        < 4. Trigger event is Mouse down   mousedown ,   Mouse movement   mousemove , Mouse release   mouseup
        < 5. Drag process: when the mouse moves, the The latest value is assigned to the left and top values of the modal box, so that the modal box can                   To follow the mouse
        < 6. The event source triggered by mouse press is   Top row   namely   id   For title
        <7, Mouse coordinates   subtract   Coordinates of the mouse in the box   actually is The true position of the modal box
        <8, Mouse down, we want to get Coordinates of the mouse in the box
        < 9. When the mouse moves, the coordinates of the modal box are displayed   Set to:   Subtract the box coordinates from the mouse coordinates. Note that the movement event is written                     To the press event

Don't say much, code!

 <div class="login-header"><a id="link" href="javascript:;">Click to pop up the login box</a></div>
  <div id="login" class="login">
    <div id="title" class="login-title">Login member
      <span><a id="closeBtn" href="javascript:void(0);" class="close-login">close</a></span>

    <div class="login-input-content">
      <div class="login-input">
        <label>user name:</label>
        <input type="text" placeholder="enter one user name" name="info[username]" id="username" class="list-input">
      <div class="login-input">
        <label>Login password:</label>
        <input type="password" placeholder="Please enter the login password" name="info[password]" id="password" class="list-input">

    <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">Login member</a></div>
  <!-- Covering layer -->
  <div id="bg" class="login-bg"></div>

    // 1. Get element
    var login = document.querySelector('.login'); // Entire pop-up window
    var mask = document.querySelector('.login-bg');//Mask
    var link = document.querySelector('#link'); //  Click open
    var closeBtn = document.querySelector('#closeBtn');
    var title = document.querySelector('#title');
    // 2. Click the pop-up layer link to display the mask and login
    link.addEventListener('click', function () { = 'block'; = 'block';
    // 3. Click closeBtn to hide mask and login 
    closeBtn.addEventListener('click', function () { = 'none'; = 'none';

    // 4. Start dragging
    // (1) When we press the mouse, we get the coordinates of the mouse in the box
    title.addEventListener('mousedown', function (e) {
      var x = e.pageX - login.offsetLeft;   // What you get is the distance from the mouse to the box
      var y = e.pageY - login.offsetTop;
      // (2) When the mouse moves, subtract the coordinates of the mouse in the page from the coordinates of the mouse in the box to obtain the left and top values of the modal box
      document.addEventListener('mousemove', move)
      function move(e) { = e.pageX - x + 'px'; Distance from mouse to page  - Current mouse position = top left = e.pageY - y + 'px';
      // (3) When the mouse pops up, the mouse movement event is removed
      document.addEventListener('mouseup', function () {
        document.removeEventListener('mousemove', move)

Before clicking:

  After clicking:

Posted by pedro84 on Sun, 10 Oct 2021 06:34:39 -0700