Форма обратной связи в модальном окне при нажатии на кнопку

658

26 ноября 2016, 19:50

Здравствуйте, есть блок, в котором присутствует форма обратной связи При уменьшении экрана до 480px эта форма скрывает и появляется кнопка "Заказать доставку".

Помогите сделать так, чтобы при нажатии на эту кнопку в модальном окне появлялась эта же форма

Answer 1

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

@media screen and (min-width: 768px) { 
  .custom-m { 
    display: block!important; 
  } 
   
  .custom-btn { 
    display: none !important; 
  } 
}

<body> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
   
   
  <div class="container"> 
    <div class="row"> 
      <!-- Trigger the modal with a button --> 
      <button type="button" class="btn btn-info btn-lg custom-btn" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 
      <!-- Modal --> 
      <div class="modal custom-m" id="myModal" role="dialog"> 
        <div class="modal-dialog"> 
 
          <!-- Modal content--> 
          <div class="modal-content"> 
            <div class="modal-header"> 
              <button type="button" class="close" data-dismiss="modal">&times;</button> 
              <h4 class="modal-title">Modal Header</h4> 
            </div> 
            <div class="modal-body"> 
              <p>Some text in the modal.</p> 
            </div> 
            <div class="modal-footer"> 
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
            </div> 
          </div> 
 
        </div> 
      </div> 
       
    </div> 
  </div>