Question

如何使我的注册按钮在单击时从旁边弹出注册表单？它目前无法正常工作，并且表单仅位于网页末尾。我是javascript的新手。我在做什么错了？？

这是注册和登录的按钮属性

<button type="button" id="signup-sidebarCollapse" class="btn btn-primary btn-signup-header">SIGNUP</button>
                        <button type="button" id="sidebarCollapse" class="btn btn-primary btn-login-header">LOGIN</button>

这是按钮属性的javascript

    <div class="sidebar-header">

    </div>
    <button type="button" class="close" id="dismiss" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button><br>
        <p class="text-join">Join our community that have more than 10,000 subscribers and learn new things everyday.</p>
        <form><br>
            <div class="form-group">
              <input type="text" class="form-control input-upper" id="fullname" placeholder="John Doe" name="fullname"><br>
              <input type="text" class="form-control input-upper" id="username" placeholder="Username" name="username"><br>
              <input type="email" class="form-control input-upper" id="email" placeholder="Email" name="email"><br>
              <input type="text" class="form-control input-upper" id="organization" placeholder="Organization" name="organization"><br>
              <input type="password" class="form-control input-upper" id="password" placeholder="Password" name="password"><br>
              <input type="password" class="form-control input-upper" id="password" placeholder="Confirm Password" name="password"><br>
              <!-- <small>By registering you agree to our <a href="">terms and conditions</a></small> -->
              <button type="button" class="btn btn-primary btn-block btn-signup-form">SIGN UP</button>
              <button type="button" class="btn btn-primary btn-block btn-sign-linkedin">Sign up with LinkedIn</button><!-- 
              <p class="text-already">Already have an account? <a href="" id="signup-sidebarCollapse">LOGIN</a></p> -->
            </div>
        </form>

</nav>



<script src="{% static 'js_new/jquery.js' %}"></script>
<script src="{% static 'js_new/bootstrap.min.js' %}"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="{% static 'js_new/owl.carousel.min.js' %}"></script>
<script src="{% static 'js_new/mousescroll.js' %}"></script>
<script src="{% static 'js_new/smoothscroll.js' %}"></script>
<script src="{% static 'js_new/jquery.prettyPhoto.js' %}"></script>
<script src="{% static 'js_new/jquery.isotope.min.js' %}"></script>
<script src="{% static 'js_new/jquery.inview.min.js' %}"></script>
<script src="{% static 'js_new/wow.min.js' %}"></script>
<script src="{% static 'js_new/main.js' %}"></script>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#sidebar").mCustomScrollbar({
            theme: "minimal"
        });

        $('#dismiss, .overlay').on('click', function () {
            $('#sidebar').removeClass('active');
            $('.overlay').removeClass('active');
        });

        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').addClass('active');
            $('.overlay').addClass('active');
            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });
    });
    // signup-sidebar
    $(document).ready(function () {
        $("#signup-sidebar").mCustomScrollbar({
            theme: "minimal"
        });

        $('#dismiss, .overlay').on('click', function () {
            $('#signup-sidebar').removeClass('active');
            $('.overlay').removeClass('active');
        });

        $('#signup-sidebarCollapse').on('click', function () {
            $('#signup-sidebar').addClass('active');
            $('.overlay').addClass('active');
            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });
    });
    // Hide SHow Jquery
    $('#sidebarCollapse').click(function(){
    $('#signup-sidebar').hide();
    $('#sidebar').show();
});
    $('#signup-sidebarCollapse').click(function(){
    $('#signup-sidebar').show();
    $('#sidebar').hide();
});
</script>

Javascript未弹出边栏

0 个答案: