-2

尝试通过引导教程使用 class = "model" 制作模式窗口。我所做的一切都与教程中的完全一样，安装了引导程序，但我的代码不起作用。有什么想法有什么问题吗？我没有使用任何 js 或其他插件，我相信我不应该。

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

4

3 回答 3

1

#在 modal 的 id 之前添加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>

于 2017-07-26T09:47:00.320 回答
1

试试这个你刚刚错过的代码 # 数据目标的符号

<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>
于 2017-07-26T09:48:40.987 回答
0

在按钮add data-target="#modal-1"中。它会起作用的

打开模态窗口

于 2017-07-26T09:53:45.777 回答