Question

我从最后几个小时开始尝试这个......

我正在尝试使用jquery ...

获取覆盖在点击上的表单

我的HTML是 -

<html>
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5;   /*older Safari*/
opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;  
position:fixed; top:0px; left:0px; width:100%;height:100%;

    color:#FFFFFF;
    text-align:center; vertical-align:middle;
}
</style>
<title>Login and Registration Form with HTML5 and CSS3</title>



    <link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
   <link rel="stylesheet" type="text/css" href="css/animate-custom.css" />






 <script>                                
$(function(){
$( '.datepicker' ).datepicker();
})
</script>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
    thediv.style.display = "";
    thediv.innerHTML = "<div class="container">


        <section>               
            <div id="container_demo" >
               <a class="hiddenanchor" id="toregister"></a>
                <a class="hiddenanchor" id="tologin"></a>

                   <div id="wrapper">

                    <div id="login" class="animate form">
<table>
<tr>
<td>

                        <form action="mysuperscript.php" autocomplete="on"> 

                            <h1>Log in</h1> 
                            <p> 
                     <label for="username" class="uname">Username</label><br>
 <input id="username" name="username" required="required" type="text" 
  placeholder="Please Enter Username"/>
                            </p>
                            <p> 
             <label for="password" class="youpasswd"> Your password</label><br>
                                <input id="password" name="password"

 required="required" type="password" placeholder="eg. X8df!90EO" /> 
                            </p>

<p class="login button"><input type="submit" value="Login" class="hidemodal" /> </p>
 <p class="change_link">
Not a member yet ?  <a href="#toregister" class="to_register">Join us</a></p>
</form>

</td>

<td>
<section class="logformside-container"><h1>Log in with</h1> 
<div>
    <span class="button">  
        <a href="#"><img src="images/facebook.png" alt="">Login with facebook</a>  
    </span>  
<br>
    <span class="button">  
    <a href="#"><img src="images/twitter_standing.png" alt="">Login with twitter</a>  
    </span>  
  <br>
    <span class="button">  
        <a href="#"><img src="images/mail.png" alt="">Login with gmail</a>  
    </span>
</div>  
</section>
</td>
</tr>
</table>
</div>







<div id="register" class="animate form">
<form  action="mysuperscript.php" autocomplete="on"> 
<h1> Register on GoodBuy </h1> 
<p> 
<label for="fullnamesignup" class="uname">Full Name</label>
<br>
<input id="usernamesignup" name="namesignup" required="required" type="text"  
placeholder="mysupername690" />
</p>

<p> 
<label for="emailsignup" class="youmail">Your email</label>
<br>
<input id="emailsignup" name="emailsignup" required="required" type="email"  
placeholder="mysupermail@mail.com"/> 
</p>

<p>
<label for="emailsignup" class="youmail" > Date of birth</label>
<br>   
<input class="datepicker" type="text"  name='' size='9' value="" placeholder="mm/dd/
 yyyy" />
</p>

<p> 
<label for="usernamesignup" class="uname">User Name</label>
<br>
<input id="usernamesignup" name="usernamesignup" required="required" type="text"   
placeholder="mysupername690" />
</p>

                            <p> 
  <label for="passwordsignup" class="youpasswd">Your   password </label><br>
  <input id="passwordsignup" name="passwordsignup" required="required" type="password" 
  placeholder="eg. X8df!90EO"/>
                            </p>
                            <p> 
  <label for="passwordsignup_confirm" class="youpasswd">Please confirm your password 
   </label><br>
   <input id="passwordsignup_confirm" name="passwordsignup_confirm" 
   required="required" type="password" placeholder="eg. X8df!90EO"/>
                            </p>
                            <p class="signin button"> 
<input type="submit" value="Sign up"/> 
                            </p>
    <p class="change_link">Already a member ?<a href="#tologin" class="to_register">
     Go and log in </a>
</p>
     </form>
    </div>

     </div>
     </div>  
     </section>
     </div>";
  }
     else{
    thediv.style.display = "none";
    thediv.innerHTML = '';
 }
  return false;
 }
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
</html>

moto是在点击“打开窗口”链接时显示隐藏的表单

请帮帮我谢谢!!

Answer 1

这可能存在语法错误，您需要检查控制台上的错误。

您在该html字符串上使用了所有双引号：

thediv.innerHTML = "<div class="container">...</div>";

应该（用单引号括起来形成一个正确的字符串）：

thediv.innerHTML = '<div class="container">...</div>';

您还需要减少额外的换行符和空格：

thediv.innerHTML = '<div class="container"><section><div id="container_demo" ><a class="hiddenanchor" id="toregister">...and so on...';

您是否有任何理由以编程方式设置'displaybox'的内容？您只需将其插入标记中，当您隐藏父容器的“displaybox”时，它也会被隐藏。

<div id="displaybox" style="display: none;">
    <div class="container">
        <section>
            <div id="container_demo" >Contents here..</div>
        <section>
    </div>
</div>
<a href='#'>Open Window</a>

使用jQuery，只需给<a>一个id，这样我们就可以正确地将它用作选择器：

<a href='#' id='open-window'>Open Window</a>

jQuery的：

$('#open-window').click(function (e) {
    //the default of <a> onclick is setting the href, we need to prevent that
    e.preventDefault();
    var thediv = $('#displaybox');
    //check of <div> is hidden/display == none
    if(thediv.is(':hidden')){
        //you can apply some fade animation as well with fadeIn() and fadeOut()
        thediv.show();
    }else{
        thediv.hide();
    }
});

请参阅此jsfiddle。

创建一个覆盖点击事件的表单

1 个答案: