創建一個表單上覆蓋單擊事件

我試圖讓使用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="[email protected]"/> 
</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>

摩托車是顯示隱藏窗體時，鏈接點擊「打開窗口」

請幫我感謝您爲！

來源

2013-12-21 arpymastro

這可能存在語法錯誤，您需要檢查控制檯上的錯誤。

您使用對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。

來源

2013-12-22 04:00:33

我已經嘗試了這兩種..你所提出的修改，也是小提琴......但沒有運氣...... – arpymastro

'displaybox'在點擊時不顯示？你可以先檢查錯誤，然後只需簡單地嘗試點擊事件是否觸發'$（'＃open-window'）。click（function（）{alert（'click'）/ *刪除裏面的所有東西，只嘗試提醒* /}）;' –

不，即使這個工作... – arpymastro

創建一個表單上覆蓋單擊事件

回答

相關問題