单击按钮时不显示模态窗体

时间：2018-01-25 08:51:55

标签： html bootstrap-modal

这是我的HTML 

<html lang ="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<p></p>
		<button class="btn btn-outline-primary" data-toggle="modal" data-target="#insertData">Insert Data</button>
				<!-- Modal -->
		<div class="modal fade" id="insertData" tabindex="-1" role="dialog" aria-labelledby="insertLabel" aria-hidden="true">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="insertLabel">Insert Data</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <form>
		      <div class="modal-body">
		       <form>
				  <div class="form-group">
				    <label for="nm">Full Name</label>
				    <input type="email" class="form-control" id="nm" aria-describedby="emailHelp" placeholder="Full Name">
				  </div>
				  <div class="form-group">
				    <label for="em">Email</label>
				    <input type="password" class="form-control" id="em" placeholder="Email">
				  </div>
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		        <button type="submit" onclick="saveData()" class="btn btn-primary">Save</button>
		      </div>
		      </form>
		    </div>
		  </div>
		</div>
		<p></p>
	</div>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

当我点击按钮时，没有任何事情发生。不知何故，如果我将样式链接更改为URL，按钮可以工作，但没有像this那样的背景颜色我已经下载了Bootstrap并将其放入我的文件夹中。我错过了什么或做错了什么？

3 个答案:

答案 0 :(得分：2)

您 应该 将引导程序和 jquery 导入head，而不是{{1} }}。检查此代码。

编辑 @ Swellar的更正：＆＃34;您也可以将脚本放入其中。这只是你何时使用脚本及其依赖的顺序问题，因此大部分时间位于上面，尤其是body＆＃34;

＆＃13;
＆＃13; 
jquery.min.js
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

根据我们的对话，您希望将Insert Data设为主要颜色。然后移除outline中的btn-outline-primary。您也可以从Save按钮

轻松复制课程

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

  <div class="container">
    <p></p>
    <button class="btn btn-primary" data-toggle="modal" data-target="#insertData">Insert Data</button>
    <!-- Modal -->
    <div class="modal fade" id="insertData" tabindex="-1" role="dialog" aria-labelledby="insertLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="insertLabel">Insert Data</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
          </div>
          <form>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="nm">Full Name</label>
                  <input type="email" class="form-control" id="nm" aria-describedby="emailHelp" placeholder="Full Name">
                </div>
                <div class="form-group">
                  <label for="em">Email</label>
                  <input type="password" class="form-control" id="em" placeholder="Email">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" onclick="saveData()" class="btn btn-primary">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <p></p>
  </div>
＆＃13;
＆＃13;
＆＃13;

这是原始代码（除了bootstrap＆＃39; css文件和jquery）

＆＃13;
＆＃13; 
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <p></p>
    <button class="btn btn-primary" data-toggle="modal" data-target="#insertData">Insert Data</button>
    <!-- Modal -->
    <div class="modal fade" id="insertData" tabindex="-1" role="dialog" aria-labelledby="insertLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="insertLabel">Insert Data</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
          </div>
          <form>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="nm">Full Name</label>
                  <input type="email" class="form-control" id="nm" aria-describedby="emailHelp" placeholder="Full Name">
                </div>
                <div class="form-group">
                  <label for="em">Email</label>
                  <input type="password" class="form-control" id="em" placeholder="Email">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" onclick="saveData()" class="btn btn-primary">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <p></p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

实际上你被标记为BS4，但你使用的是外部BS3 js，外部jQuery 2.x和本地未知的BS css。

首先正确使用BS，请阅读documentation。

相关问题
最新问题