Question

我希望创建一个类似的窗口，其中包含如下图所示的窗体。

Objective

在我点击顶部导航栏上的登录链接的情况下，将调用包含该表单的屏幕。

我的方法是使用包含表单及其元素的隐藏div，同时调用函数来启用和禁用div的可见性。

目前我正在设计隐藏div，如public.css中的log_in_form_div类所示。

以下是我的HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   <title>Swim-mates - Sign Up or Log In</title>

   <!-- Generic CSS -->
   <link href="stylesheets/public.css" rel="stylesheet">

   <!-- Social networking log in button CSS -->
   <link href="stylesheets/auth-buttons.css" rel="stylesheet">

   <link href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/base/base-min.css" rel="stylesheet" >

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

   <!-- Custom CSS -->
   <link href="stylesheets/modern-business.css" rel="stylesheet">

   <!-- Custom Fonts -->
   <link href="font-awesome-4.1.0/stylesheets/font-awesome.min.css" rel="stylesheet">

   <!-- HTML5 Reset Stylesheet
   <link href="stylesheets/html5reset-1.6.1.css" rel="stylesheet"> -->

   <!-- Normalize CSS
   <link rel="stylesheet" href="stylesheets/normalize.css" />  -->    

</head>

<body>
    <nav id="topbar"> 
        <a id="logo_link" href="">ABCD corp</a>

        <ul>
            <li><a href='#' onclick="javascript:btnLogInForm();">LOG IN</a></li>
            <li><a href='#'>HOW IT WORKS</a></li>
            <li><a href='#'>FEATURES</a></li>
            <li><a href='#'>abcd.com</a></li>
        </ul>
    </nav>

    <!-- Welcome message -->
    <section class="welcome_message">Welcome message ... Welcome message ... Welcome message ... Welcome message ... Welcome message ... </section>

    <!-- Header Carousel -->
    <header id="myCarousel" class="carousel slide">

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="fill" style="background-image:url('images/1900x1080imgtest1.jpg');"></div>

                <div class="carousel-caption">
                     Caption A
                </div>
            </div>

            <div class="item">
                <div class="fill" style="background-image:url('images/1900x1080imgtest2.jpg');"></div>

                <div class="carousel-caption">
                     Caption B
                </div>
            </div>

            <div class="item">
                <div class="fill" style="background-image:url('images/1900x1080imgtest3.jpg');"></div>

                <div class="carousel-caption">
                     Caption C
                </div>
            </div>
        </div>    
    </header>

    <!-- Page Content -->
    <section id="page_content" class="page_content_div">

        <div class="page_content_main_div">

            <div class="log_in_heading_div" >
                <p> Log in with: </p>
            </div>

            <div class="log_in_div">
                <a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
            </div>

            <div class="log_in_div">
                <a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
            </div>

            <div class="btn_log_in_with_email_div">
                <a class="btn-auth btn_log_in_with_email large" href="#">Log in with <b>Our details</b></a>
            </div>

            <hr class="hr"></hr>

            <form action="#" method="GET" class="sign_up_form">
                <div class="sign_up_heading_div">
                    <p>Sign up:</p>
                </div>                

                <div>
                    <input title="Enter first name" class="firstname" name="firstname" type="text" required placeholder="Enter first name">
                </div>

                <div>
                    <input title="Enter second name" class="secondname" name="secondname" type="text" required placeholder="Enter second name">
                </div>

                <div>
                    <input title="Enter an email" class="email" name="password" type="text" required placeholder="Enter email">
                </div>

                <div>
                    <input title="Enter a password" class="password" name="password" type="password" required placeholder="Enter password">
                </div>                

                <div>
                    <input title="Re-enter password" class="reenterpassword" name="reenterpassword" type="password" required placeholder="Re-enter password">
                </div>

                <div class="form_button_internal_div">
                    <button title="Type your second name" type="submit" class="btn_sign_up">Sign Up</button>
                </div>

                <div class="form_terms_of_service_internal_div">
                    <p class="terms_of_service">By signing up, I agree to the ABCD <a href='#' id="generic_link_decoration"><b>Terms of Service</b></a> and <a href='#' id="generic_link_decoration"><b>Privacy Policy</b></a>.</p>
                </div>                                
            </form>

        </div>
    </section>      

    <div class="log_in_form_div" id="log_in_form_div">
        <form class="log_in_form" action="#">
            <ol>
                <li class="group">
                    <label for="namefield">Username</label>
                    <input type="text" name="name" id="namefield" />
                </li>
                <li class="group">
                    <label for="passwordfield">Password</label>
                    <input type="text" name="password" id="passwordfield" />
                </li>
                <li class="group">
                    <div class="grouplabel">Sign up for</div>
                    <ol>
                        <li>
                            <input type="radio" name="membershiptype" value="beginner" id="beginnerbtn" />
                            <label for="beginnerbtn">Beginner</label>
                        </li>
                        <li>
                            <input type="radio" name="membershiptype" value="question" id="question" />
                            <label for="question">Pro</label>
                        </li>
                    </ol>
                </li>
            </ol>

            <button type="submit" class="btn_sign_up" id="btn_cancel_log_in_form" onclick="btnCancelLogInForm()">Cancel</button>

            <button type="submit" class="btn_sign_up" id="btn_send_log_in_form" onclick="btnCancelLogInForm()">Send</button>            
        </form>
    </div>

    <section>
        <footer class="footer_div"> 
            <ul>
                <li><a href='#'>ABOUT</a></li>
                <li><a href='#'>TERMS OF SERVICE</a></li>
                <li><a href='#'>FEATURES</a></li>
                <li><a href='#'>HELP</a></li>
            </ul>     
        </footer>    
    </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Script to Activate the Carousel i.e. directly related to carousel class name -->
    <script>
        $('.carousel').carousel( {
            interval: 3500 //changes the speed
        })

        function btnLogInForm() {
        document.getElementById("log_in_form_div").style.visibility="visible"; 
        }

        function btnCancelLogInForm() {
            document.getElementById("log_in_form_div").style.visibility = "hidden";
        }        
    </script>     

</body>

</html>

以下是我的CSS代码：

enter code here      padding: 0;
    margin: 0;
}
/* Insert a gap after every <ul> element */
.footer_div ul:after {
    content:" ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* ul li a */
.footer_div ul li a {
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
    color: #F5F5F5;
    text-decoration: none;
    display: block;
    padding: 15px 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 19px;
    position: relative;
    -webkit-transition: color .25s;
    -moz-transition: color .25s;
    -ms-transition: color .25s;
    -o-transition: color .25s;
    transition: color .25s;
}

/* ul li a:hover */
.footer_div ul li a:hover {
    color: #000000;
}

/* Bullet point after the menu name 
.footer_div ul li a:after {
    content:"";
    display: block;
    position: absolute;
    right: -3px;
    top: 19px;
    height: 6px;
    width: 6px;
    background: #F5F5F5;
    opacity: .5;
} */

/* Insert content before every <a> element's content */
.footer_div ul li a:before {
    content:"";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #00FF00;
    -webkit-transition: width .25s;
    -moz-transition: width .25s;
    -ms-transition: width .25s;
    -o-transition: width .25s;
    transition: width .25s;
}

/* */
.footer_div ul li.last > a:after,.footer_div ul li:last-child > a:after {
    display: none;
}

/* */
.footer_div ul li.active a {
    color: #999999;
}

/* */
.footer_div ul li.active a:before {
    width: 100%;
}

/* */
.footer_div.align-right li.last > a:after,.footer_div.align-right li:last-child > a:after {
    display: block;
}

/* */
.footer_div.align-right li:first-child a:after {
    display: none;
}

我的问题是：

我采取的方法是最好的吗？
我似乎在我的代码的javascript位中出错，我尝试启用和禁用div？

由于

Answer 1

对于导航菜单，您可以像这样使用jquery。您只需要使用此

更改导航标记即可

<nav id="topbar"> 
        <a id="logo_link" href="">ABCD corp</a>

        <ul>
            <li><a href='#' id="login">LOG IN</a></li>
            <li><a href='#'>HOW IT WORKS</a></li>
            <li><a href='#'>FEATURES</a></li>
            <li><a href='#'>abcd.com</a></li>
        </ul>
    </nav>

在脚本标记中

只需添加此内容。

<script>
$(document).ready(function(){
   $('#login').click(function(){
     $('#log_in_form_div').show();
   });
   $('#btn_cancel_log_in_form').click(function(){
    $('#log_in_form_div').hide();
   });
   $('.carousel').carousel( {
            interval: 3500 //changes the speed
        });
)};




    </script>

Answer 2

您需要使用＆＃34;显示＆＃34; CSS属性，用于完全隐藏和显示DOM中的元素。

function btnLogInForm() {
        document.getElementById("log_in_form_div").style.display="block"; 
        }

function btnCancelLogInForm() {
                document.getElementById("log_in_form_div").style.display="none";
            }

使用Bootstrap Modal或jQuery可以让生活更轻松。

Answer 3

您在代码中使用bootstrap框架。我认为最好使用bootstrap模式进行表单显示。 Bootstrap模式允许您轻松有效地显示模态弹出窗口

bootstrap modal

Answer 4

当我将其更改为显示时，它会起作用：http://jsfiddle.net/e2fhr3ju/1/

可见性和显示之间的差异：http://www.w3schools.com/css/css_display_visibility.asp

CSS：

#log_in_form_div {
    display:none;
    height: 100px;
    width: 100px;
    border:1px solid black;
}

使用Javascript：

function btnLogInForm() {
    document.getElementById("log_in_form_div").style.display = "block";
}

function btnCancelLogInForm() {
    document.getElementById("log_in_form_div").style.display = "none";
}

启用和禁用div可见性的问题

4 个答案: