Alina Dyussupova Alina Dyussupova - 3 years ago 77
CSS Question

Cannot open my modal window in html file

Tried to make a modal window using class = "model" via bootstrap tutorial. I did everything exactly like in the tutorial, installed bootstrap but my code doesn't work. Any ideas what's wrong with it? I didn't used any js or other plugins and I believe that I shouldn't.



<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="modal-1">
Open modal window
</button>
<div class="modal" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
<button class="close" type="button" data-dismiss="modal">
<i class="fa fa-close"></i>
</button>

</div>
<div class="modal-body">
<p>Something</p>

</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button>
</div>
</div>
</div>

</div>


<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>




Answer Source

Try this code you have just missed # symbol for data-target

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal-1">
    Open modal window
    </button>


<div class="modal" id="modal-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Registration</h4>
        <button class="close" type="button" data-dismiss="modal">
              <i class="fa fa-close"></i>
            </button>

      </div>
      <div class="modal-body">
        <p>Something</p>

      </div>
      <div class="modal-footer">
        <button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button>
      </div>
    </div>
  </div>

</div>
<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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download