Cannot open my modal window in html file

Question

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>

score 1 · Answer 1 · answered Jul 26 '17 at 09:47

Add # before the id of the modal in 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>

score 1 · Accepted Answer · answered Jul 26 '17 at 09:48

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>

score 0 · Answer 3 · answered Jul 26 '17 at 09:53

0

In button add data-target="#modal-1". it will work

Open modal window

answered Jul 26 '17 at 09:53

Swadesh Ranjan Dash

544
1
4
17

Cannot open my modal window in html file

3 Answers3