链接点击时不弹出模式答案

【问题标题】：Modal not popping up on link click链接点击时不弹出模式
【发布时间】：2017-11-08 16:05:32
【问题描述】：

我需要在单击链接时弹出一个模式对话框。我已经扫描了相关问题并遵循了类似的说明，但是，似乎没有一个解决方案有效。下图是我的页面的样子。点击“更新”应该会打开一个模式窗口。

这是我的 EJS 文件。

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/javascript"></script>
  <link href="javascripts/frontend.js">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="/stylesheets/userlist.css" rel="stylesheet">
  <link href='//fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'>
  <link href='//fonts.googleapis.com/css?family=NTR' rel='stylesheet'>



  <title>Userlist</title>
  <!-- <script>$(document).ready({

	});
	</script> -->
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <h1><strong>FORM</strong></h1>

      <hr id="hr2" style="border: 6px solid palevioletred">


      <form action="/users/add_user" class="form-horizontal" id="user_form" method="post" name="user_form">
        <fieldset>
          <!-- Text input-->


          <div class="form-group">
            <label class="col-md-4 control-label" for="textinput">Name :</label>

            <div class="col-md-4">
              <input class="form-control input-md" id="nameinput" name="name" onfocus="if (this.value=='Name') this.value='';" placeholder="Enter Username" type="text" value="Name">
            </div>
          </div>
          <!-- Text input-->


          <div class="form-group">
            <label class="col-md-4 control-label" for="textinput">Age :</label>

            <div class="col-md-4">
              <input class="form-control input-md" id="ageinput" name="age" placeholder="Enter Age" type="number">
            </div>
          </div>
          <!-- Button -->
          <!-- Button (Double) -->


          <div class="form-group">
            <div class="col-md-8">
              <button class="btn btn-success" id="singlebutton" type="submit"><b>Add User</b></button>
            </div>
          </div>
        </fieldset>
      </form>


      <h1><strong>USERS</strong>
      </h1>

      <hr id="hr1" style="border: 6px solid #7ec4ec;">


      <ul class="triangle" id="list">
        <!-- Link trigger modal -->
        <!-- Modal -->


        <li style="list-style: none; display: inline">

          <%for(var i=0; i<userlist.length; i++) {%>
        </li>


        <!-- ______ MODAL ______ -->

        <div aria-labelledby="myModalLabel" class="modal fade" id="openModal" role="dialog" tabindex="-1">
          <div class="modal-dialog" role="dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>

                <h4 class="modal-title" id="myModalLabel">Edit :</h4>
              </div>


              <div class="modal-body">
                HEY!!
                <!--		<form>
										Name:<input id="nameId" name="modal_username" type="text" value=""> Age:<input id="ageId" name="modal_age" type="number" value="">
									</form> -->
              </div>


              <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">Close</button> <button class="btn btn-primary" type="button">Save changes</button>
              </div>
            </div>
          </div>
        </div>


        <li>
          <%= userlist[i].name %>:
            <%= userlist[i].age %> <a class="delete_user" data-id="<%= userlist[i]._id %>" href="#" id="delete" title="Delete this User">Delete</a> || <a href="#openModal" class="update_user" data-target="#openModal" data-toggle="modal" id="update" title="Update user info"
                data-id="<%= userlist[i]._id %>">Update</a>
        </li>
        <%} %>
      </ul>
    </div>
  </div>
</body>

</html>

我使用的是 bootstrap 3.2.0，并且在 bootstrap 之前包含了 jquery。

【问题讨论】：

你可以尝试将jquery源文件放在body标签之后和html标签结束之前吗？我认为你也需要 boostrap.min.js
@KaoriYui 成功了。还需要包含 bootstrap.min.js。把它和 bootstrap.min.css 搞混了。您应该将其发布为答案。

标签： jquery html twitter-bootstrap bootstrap-modal

【解决方案1】：

请尝试将依赖项放在</body> 标记之后和</html> 之前，如下例所示。原因是 jquery 或 javascripts 必须看到您所定位的元素，因此层次结构是 javascript 功能之前的元素。

</body>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>

</html>

【讨论】：

【解决方案2】：

只是你使用了提交按钮

<button class="btn btn-success" id="singlebutton" type="submit"><b>Add User</b></button>

这将提交您的表单或至少会刷新页面

改成按钮就好了

<button class="btn btn-success" id="singlebutton" type="button"><b>Add User</b></button>

【讨论】：

@KaoriYui 用他的评论解决了这个问题。谢谢。