How to make a button in the center of the screen appear when pressing the button.

<div class="row"> <div class="col-md-3"> <button class="btn btn-info">Заказать счет</button> </div> <div class="col-md-3"> <button class="btn btn-info">Заказать счет</button> </div> <div class="col-md-3"> <button class="btn btn-info">Заказать счет</button> </div> </div>

There are three buttons, each button when pressed should appear a block with different information. Who is not difficult to more detail to paint everything?

    2 answers 2

    Here is the simplest example of a modal window.

     function ShowModal(elId) { var modalAll = document.getElementById(elId); modalAll.style.display = "flex"; } function HideModal(ell) { if (ell.classList.contains('modal-all')) { ell.style.display = "none"; } } 
     .modal-all { display: none; background: rgba(20, 20, 20, 0.3); position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; align-items: center; align-content: center; justify-content: center; } .modal { width: 200px; height: 120px; background: white; border: 1px solid silver; padding: 15px; } 
     <div class="row"> <div class="col-md-3"> <button onclick="ShowModal('m1')" class="btn btn-info">Заказать счет</button> </div> <div class="col-md-3"> <button onclick="ShowModal('m2')" class="btn btn-info">Заказать счет</button> </div> <div class="col-md-3"> <button onclick="ShowModal('m3')" class="btn btn-info">Заказать счет</button> </div> </div> <div id="m1" class="modal-all" onclick="HideModal(this)"> <div id="m1i" class="modal"> Форма 1 форма 1 форма 1 </div> </div> <div id="m2" class="modal-all" onclick="HideModal(this)"> <div id="m2i" class="modal"> Форма 2 форма 2 форма 2 </div> </div> <div id="m3" class="modal-all" onclick="HideModal(this)"> <div id="m3i" class="modal"> Форма 3 форма 3 форма 3 </div> </div> 

       window.onload = () => { let buttons = document.getElementsByClassName('btn-info'), modalsData = [ 'MODAL 1', 'MODAL 2', 'MODAL 3' ], openedModalId; let passDataAndOpenModal = function (data) { let parentBlock =document.getElementsByTagName('body')[0], block = document.createElement('div'); block.className = 'info-modal'; block.innerHTML = data; parentBlock.appendChild(block); } for(let i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', (e) => { if(document.getElementsByClassName('info-modal').length > 0){ let modal = document.getElementsByClassName('info-modal')[0]; document.getElementsByTagName('body')[0].removeChild(modal); } passDataAndOpenModal(modalsData[i]); openedModalId = i; }, false); } }; 
       .info-modal{ width: 100px; height: 100px; padding: 10px; text-align: center; border: 1px solid grey; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; } 
       <div class="row"> <div class="col-md-3"> <button class="btn btn-info">Заказать счет</button> </div> <div class="col-md-3"> <button class="btn btn-info">Заказать счет</button> </div> <div class="col-md-3"> <button class="btn btn-info">Заказать счет</button> </div> </div>