首页 > 解决方案 > 尝试实现登录弹出窗口,但引导模式不可点击

问题描述

我正在尝试在我的页面上添加一个登录弹出窗口,但在它弹出后,它是不可点击的(输入字段和按钮)

我对自定义 Web 应用程序开发很陌生,所以我采购了一些组件。我正在为客户开发这个项目,同时提高我的技能并从 wordpress 即插即用生活方式中脱颖而出

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>Sedima</title>

<!-- Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">


<!-- popupstyles -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>


<link rel="stylesheet" type="text/css" href="css/menu.css" media="all" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
        <div class="loginmodal-container">
            <h2>Registration</h2>
        <form>
          <input type="text" name="user" placeholder="Username">
          <input type="password" name="pass" placeholder="Password">
          <input type="submit" name="login" class="login loginmodal-submit" value="Register">
        </form>

        <div class="login-help">
            <a href="#">Login</a> - <a href="#">Forgot Password</a>
        </div>
      </div>
  </div>
</div>

<!-- Scrips -->
<!-- Core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>


<!-- jQuery lib from google server ===================== -->
<script src="js/jquery-1.7.2.min.js"></script>

<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts -->
<script src="js/grayscale.min.js"></script>


<!-- popupscripts -->
<!-- value controll and input masking scripts (will prolly replace with my own in future) -->
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js'></script>


<!-- custom scripts -->
<script  src="js/index.js"></script>
<script  src="js/login.js"></script>
<script  src="js/reg.js"></script>

标签: jqueryhtmlbootstrap-modal

解决方案


我假设你不使用

$(function() {
  console.log("DOM is ready!");
});

等到文件准备好。

如果 DOM 确实准备好这样做,请确保您的 HTML 修改已完成。


推荐阅读