Лучшая реализация модальных окон

274

21 августа 2017, 10:56

Хочу узнать у опытных программистов, как лучше реализовать модальное окно? Код не вставляю т.к. это теория.

Например, я знаю два способа. 1. вставить модальное окно прям в верстку и открывать или скрывать его при надобности. 2. Создавать окно с помощью JS.

Хочется узнать, что выгодней использовать, что меньше нагружает компьютер. Или это зависит от задачи. Например, если нужно модальное окно для ошибки, то лучше его создавать через js, а если это фотогалерея, создать окно при первом клике по фото и потом изменять содержимое окна(если пользователь листает фото).

Answer 1

Создавать или открывать - вот в чём вопрос.
Как удобнее в проекте; нагрузить устройство созданием элементов можно, но для этого надо быть неплохим рукокрюком.
Я предпочитаю открывать уже созданную разметку - её шаблонизатор создаст, а JS получит лишь CSS-путь к ключевым элементам, например:

class Modal{ 
  static setElements(els){ 
    Modal._els = els; 
  } 
   
  constructor(data){ 
    data = Object.assign({ 
      header: 'Заголовок', 
      body: 'Тело', 
       
      ok: () => 1, 
      no: () => 0 
    }, data); 
     
    this._data = data; 
  } 
   
  show(){ 
    if(!Modal._els) return; 
     
    Modal._els.header.innerHTML = this._data.header; 
    Modal._els.body.innerHTML = this._data.body; 
     
    Modal._els.yes.addEventListener('click', this._data.yes); 
    Modal._els.no.addEventListener('click', this._data.no); 
       
    Modal._els.wrapper.classList.toggle('modal_show'); 
     
    return this; 
  } 
   
  hide(){ 
    Modal._els.yes.removeEventListener('click', this._data.yes); 
    Modal._els.no.removeEventListener('click', this._data.no); 
     
    Modal._els.wrapper.classList.toggle('modal_show'); 
     
    return this; 
  } 
} 
 
document.addEventListener('DOMContentLoaded', e => { 
  let els = { 
    header: document.querySelector('#modal__header'), 
    body: document.querySelector('#modal__body'), 
    footer: document.querySelector('#modal__footer'), 
    wrapper: document.querySelector('#modal__wrapper'), 
  }; 
   
  els.yes = els.footer.children[0]; 
  els.no = els.footer.children[1]; 
   
  Modal.setElements(els); 
   
  document.querySelector('#open').addEventListener('click', e => { 
    let modal = (new Modal({ 
      header: 'Новое уведомление', 
      body: 'Я открылся!', 
      yes: e => { 
        console.info('Да!'); 
        modal.hide(); 
      }, 
      no: e => { 
        console.info('Нет!'); 
        modal.hide(); 
      } 
    })).show(); 
  }); 
});

#modal__wrapper{ 
  display: none; 
  position: absolute; 
  left: 0; top: 0; 
  width: 100%; height: 100%; 
  background: rgba(0, 0, 0, .4); 
} 
#modal{ 
  margin: auto; 
  min-height: 20%; 
  min-width: 50%; 
  border: 1px solid rgba(0, 0, 0, 0.42); 
  box-shadow: 0 0 6px 0px rgba(0, 0, 0, 0.42); 
  background: #ececec; 
  padding: 10px; 
} 
#modal__header{ 
  padding: 0 0 5px 7px;; 
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); 
} 
#modal__body{ 
  padding: 10px; 
} 
#modal__footer{ 
  float: right; 
} 
 
.modal_show{ 
  display: flex !important; 
}

<div id='modal__wrapper'> 
  <div id='modal'> 
    <div id='modal__header'>Header</div> 
    <div id='modal__body'>Body</div> 
    <div id='modal__footer'> 
      <input type='button' value='Yes' /> 
      <input type='button' value='No' /> 
    </div> 
  </div> 
</div> 
<input type='button' id='open' value='Open' />