2013-03-10 152 views
0

我试图做一个弹出窗口,当按下“弹出”按钮作为我的学校的Javascript分配的一部分,但无法弄清楚为什么我的代码不工作。我已将弹出按钮分配给jQuery选择器,但仍然无法打开。弹出窗口不能正常工作

<html> 
<head> 
<title>Adam Ginther's Pop-up Window</title> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
<div id="panel"> 
Congrats! You won! 
</div> 
<div id="centreblock"> 
<h1>WOW! AMAZING!!!</h1> 
<img src="images/ipad.gif" width="100%" height="250"> 
<p>Congratulations! You won a free iPad! Enter your name, address, and phone number to have it delivered now. 
<form action=""> 
<br> 
<label for="firstName">First Name: </label> 
<input type="text" size="12" id="firstName" name="firstName"> 
<br> 
<br> 
<label for ="lastName">Last Name: </label> 
<input type="text" size"12" id="lastName" name="lastName"> 
<br> 
<br> 
<label for="address">Address: </label> 
<input type="text" size="12" id="address" name="address"> 
<br> 
<br> 
<label for="phoneNum">Phone Number: </label> 
<input type="text" size="12" id="phoneNum" name="phoneNum"> 
</form> 
<br> 
<a href="#" id="popup"><br>REDEEM THIS SPECTACULAR OFFER NOW!</a> 
<br> 
</div> 
<script src="http//code.jquery.com/jquery-latest.min.js"></script> 
<script src="js/script.js"></script> 
</body> 
</html> 


//script.js 
var new_win; 
var firstName; 
var lastName; 
var address; 
var phoneNumber; 

function newWindow() { 
    firstName = $('#firstName').val(); 
    if (firstName !='') { 
    window.open('popup.html'); 
    } else { 
     $('#firstName').addClass('error'); 
    }; 
    $(function() { 
     $('#popup').click(function() { 
      newWindow(); 
     }); 
    }); 
}; 
+0

你已经定义了一个函数,它只能从它自己内部调用。没有代码实际上首先调用函数。从函数定义中删除jquery domready代码,以便它实际上可以被调用。 – kinakuta 2013-03-10 06:00:16

回答

1

试试这个:

<html> 
<head> 
<title>Adam Ginther's Pop-up Window</title> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/style.css"> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="js/script.js"></script> 
<script language="javascript"> 


//script.js 
var new_win; 
var firstName; 
var lastName; 
var address; 
var phoneNumber; 

function popitup(url) { 
    newwindow=window.open(url,'name','height=200,width=150'); 
    if (window.focus) {newwindow.focus()} 
    return false; 
} 

function newWindow() { 
    firstName = $('#firstName').val(); 
    if (firstName !='') { 
    popitup('popup.html'); 
    } else { 
     $('#firstName').addClass('error'); 
    }; 
}; 

    $(document).ready(function(){ 
     $('#popup').click(function() { 
      newWindow(); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div id="panel"> 
Congrats! You won! 
</div> 
<div id="centreblock"> 
<h1>WOW! AMAZING!!!</h1> 
<img src="images/ipad.gif" width="100%" height="250"> 
<p>Congratulations! You won a free iPad! Enter your name, address, and phone number to have it delivered now. 
<form action=""> 
<br> 
<label for="firstName">First Name: </label> 
<input type="text" size="12" id="firstName" name="firstName"> 
<br> 
<br> 
<label for ="lastName">Last Name: </label> 
<input type="text" size"12" id="lastName" name="lastName"> 
<br> 
<br> 
<label for="address">Address: </label> 
<input type="text" size="12" id="address" name="address"> 
<br> 
<br> 
<label for="phoneNum">Phone Number: </label> 
<input type="text" size="12" id="phoneNum" name="phoneNum"> 
</form> 
<br> 
<a href="javascript:void(0)" id="popup"><br>REDEEM THIS SPECTACULAR OFFER NOW!</a> 
<br> 
</div> 
</body> 
</html> 

请注意:

  • jQuery的版本已经过时
  • 有在javascript函数

我做了一些改变希望得到s可能会有帮助。您可以根据您的流量和要求进行编辑。