Bootstrap Модал не закроется на Х - PullRequest
Новая
       6

Bootstrap Модал не закроется на Х

0 голосов
/ 16 марта 2020

Я искал все существующие вопросы и просто не могу найти ничего, что решало бы мою проблему. Я очень новичок в этом, взяв на внутреннюю страницу для работы. У меня будет несколько модальностей (только один настроен, поскольку я не могу правильно выбрать первый). Он отказывается закрывать информационный модал, который у меня до сих пор. Кнопка закрытия в заголовке работала, пока я не изменил класс кнопки на .darcybutton. Пожалуйста, обратите внимание, что я откровенно проверил эту вещь вместе с помощью нескольких попыток поиска в Google, поэтому все, что выглядит несовпадающим или неправильным, заключается в том, что я просто притворяюсь, пока не сделаю это :) Любые предложения? 

<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<style>
body{
     background-image: linear-gradient(0deg, #00497700, #004977ff);

      }

.darcybutton{
  background: #fff;
  border-radius: 12px;
  border: 4px solid #fff;
  font-size: 30px;
  font-family: optimist;
  color: #013d5b;
  width: 400px;
  height: 400px;
  margin: 10px 50px 10px 50px;
  text-align: center;
  }
  .darcybutton:hover {
   color: #fff;
   background-color: #013d5b;
 }
 
 
</style>


<center>
<button type="button" class="button darcybutton" data-toggle="modal" data-target=".bd-example-modal-lg">First Modal</button>
<button type="button" class="button darcybutton" data-toggle="modal" data-target=".bd-example-modal-lg">Second Modal</button>
<button type="button" class="button darcybutton" data-toggle="modal" data-target=".bd-example-modal-lg">Third Modal</button>
</center>
<hr>
<center>
<button type="button" class="button" data-toggle="modal" data-target=".bd-example-modal-lg"> Fourth Modal</button>
<button type="button" class="button" data-toggle="modal" data-target=".bd-example-modal-lg">Fifth Modal</button>
</center>


<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" optimist-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title .bd-sample-modal-lg">First Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span optimist-hidden="true">&times;</span>
        </button>
          <div class="modal-body">          
           <p>Qualifications</p>
            <p>Description</p>
             <p>Process</p> 
          </div>
       </div>
      </div>
    </div>
  </div>



<script>
$('.bd-example-modal-lg').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var recipient = button.data('whatever')
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
...