script/modal1.js - main - alesu1543/practPython

script/modal1.js
92 строки4 KB
Alexey Subbotin
new
31 июл 2022, 15:58
31 июл 2022, 15:58c0da1b7

!function(e){"function"!=typeof e.matches&&(e.matches=e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||function(e){for(var t=this,o=(t.document||t.ownerDocument).querySelectorAll(e),n=0;o[n]&&o[n]!==t;)++n;return Boolean(o[n])}),"function"!=typeof e.closest&&(e.closest=function(e){for(var t=this;t&&1===t.nodeType;){if(t.matches(e))return t;t=t.parentNode}return null})}(window.Element.prototype);

document.addEventListener('DOMContentLoaded', function() {

   /* Записываем в переменные массив элементов-кнопок и подложку.
      Подложке зададим id, чтобы не влиять на другие элементы с классом overlay*/
   var modalButtons = document.querySelectorAll('.js-open-modal'),
       overlay      = document.querySelector('.js-overlay-modal'),
       closeButtons = document.querySelectorAll('.js-modal-close');


   /* Перебираем массив кнопок */
   modalButtons.forEach(function(item){

      /* Назначаем каждой кнопке обработчик клика */
      item.addEventListener('click', function(e) {

         /* Предотвращаем стандартное действие элемента. Так как кнопку разные
            люди могут сделать по-разному. Кто-то сделает ссылку, кто-то кнопку.
            Нужно подстраховаться. */
         e.preventDefault();

         /* При каждом клике на кнопку мы будем забирать содержимое атрибута data-modal
            и будем искать модальное окно с таким же атрибутом. */
         var modalId = this.getAttribute('data-modal'),
             modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]');


         /* После того как нашли нужное модальное окно, добавим классы
            подложке и окну чтобы показать их. */
         modalElem.classList.add('active');
         overlay.classList.add('active');
		 
		 
		// alert( "Привет" );
		// alert(document.activeElement.id);
		// modalId.geValue
		// alert(document.querySelector(modalId).value);
		 
		let str1 = document.activeElement.id;
		let strId = str1.substring(str1.indexOf('_')+1, 10);	 
		
		//alert( str1.indexOf('_') );	
		//let num1 = Number(str1); // становится числом 123
		//alert(typeof num1);
		 
		//alert(document.getElementById('textEd1').value);
		//alert(document.getElementById('id1_147').innerHTML);
		document.getElementById('textEd1').value = document.getElementById('id1_'+strId).innerHTML;
		document.getElementById('textEd2').value = document.getElementById('id2_'+strId).innerHTML;
		document.getElementById('textEd3').value = document.getElementById('id3_'+strId).innerHTML;
		
		document.getElementById('textId').value = strId;
		document.getElementById('aId').href = "practUpload/index.php?id="+strId;
		
      }); // end click

   }); // end foreach


   closeButtons.forEach(function(item){

      item.addEventListener('click', function(e) {
         var parentModal = this.closest('.modal');

         parentModal.classList.remove('active');
         overlay.classList.remove('active');
      });

   }); // end foreach


    document.body.addEventListener('keyup', function (e) {
        var key = e.keyCode;

        if (key == 27) {

            document.querySelector('.modal.active').classList.remove('active');
            document.querySelector('.overlay').classList.remove('active');
        };
    }, false);


    overlay.addEventListener('click', function() {
        document.querySelector('.modal.active').classList.remove('active');
        this.classList.remove('active');
    });




}); // end ready