搜索时不弹出模态功能，"close"功能不关闭
modal feature does not pop up upon searching, and "close" function doesn't close
和善良的网络开发人员，
下面贴出了 HTML、CSS 和 JavaScript 代码
我正在使用 OMDB API 在搜索时从其电影数据库中检索信息。 API 完美运行。但是，我的模态功能在搜索时没有弹出，"close"功能也不起作用。
此外，这是我从 Safari 的 Web Inspector 得到的错误：
TypeError: undefined is not an object (evaluating 'span.onclick = >function() {
modal.style.display = "none";}')
提前致谢！
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
</script>
<script src="film.js"></script>
<div class="search_bar">
<form onsubmit="return false" id="searchbox" action="">
<input type="text" id="search" placeholder="movie title">
<input name ="myBtn" id ="myBtn" type="submit"
onclick="getMovie()" value="search">
</form>
</div>
<div name ="myModal" id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span name="close" class="close">x</span>
<h1 id="title"></h1>
<div class="modal-body">
<img src="">
<h2 id="year"></h2>
<h2 id="Director"></h2>
<h2 id="rating"></h2>
<p id="plot" style="font-size:23px"></p>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript
function getMovie()
{
$.ajax({
type: "get",
url: "http://www.omdbapi.com/?",
data: {
t: document.getElementById('search').value,
type: 'movie'
},
success: function (movies) {
document.getElementById('title').innerHTML = movies.Title;
$('.modal-header img').attr("src", movies.Poster);
document.getElementById('year').innerHTML = "Year: " + movies.Year;
document.getElementById('rating').innerHTML = "Rating: " +
movies.Rated;
document.getElementById('Director').innerHTML = "Director: " +
movies.Director;
document.getElementById('plot').innerHTML = "Plot: " + movies.Plot;
}
} );
}
var modal = document.getElementsByName('myModal');
// Get the button that opens the modal
var btn = document.getElementsByName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
CSS
body{
background-image: url("http://kosmosaicbooks.com/wp-
content/uploads/2012/01/Favorite-Sci-Fi-Posters.jpg");
background-size: 100%;
}
#Information {
width:20%;
margin:0 auto;
}
#searchbox
{
background-color: #eaf8fc;
background-image: linear-gradient(#fff, #d4e8ec);
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 500px;
height: 35px;
padding: 10px;
margin: 100px auto 50px;
overflow: hidden;
}
#search,
#myBtn {
float: left;
}
#search {
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255,
255, 1);
}
#myBtn
{
background-color: #6cbb6b;
background-image: linear-gradient(#95d788, #6cbb6b);
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#myBtn:hover {
background-color: #95d788;
background-image: linear-gradient(#6cbb6b, #95d788);
}
#myBtn:active {
background: #95d788;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#myBtn::-moz-focus-inner {
border: 0;
}
/*
.modal-content {
width: 80%;
}
.modal-header {
background-color: white;
text-align: center;
}
*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
您可以按如下方式使用 jQuery：
$(function() {
var modal = $('#myModal');
// Get the button that opens the modal
var btn = $("#myBtn");
// Get the <span> element that closes the modal
var btnClose = $(".close");
function getMovie() {
$.ajax({
type: "get",
url: "https://www.omdbapi.com/?",
data: {
t: document.getElementById('search').value,
type: 'movie'
},
success: function (movies) {
$('#title').text(movies.Title);
$('.modal-header img').attr("src", movies.Poster);
$('#year').text("Year: " + movies.Year);
$('#rating').text("Rating: " + movies.Rated);
$('#Director').text("Director: " + movies.Director);
$('#plot').text("Plot: " + movies.Plot);
modal.fadeIn();
}
});
}
// When the user clicks the button, open the modal
btn.click(function(event) {
event.preventDefault();
getMovie();
});
// When the user clicks on <span> (x), close the modal
btnClose.click(function() {
modal.fadeOut();
});
// When the user clicks anywhere outside of the modal, close it
$(window).click(function(event) {
if (!$(event.target).closest(modal).length) {
modal.fadeOut();
}
});
});
body{
background-image: url("http://kosmosaicbooks.com/wp-
content/uploads/2012/01/Favorite-Sci-Fi-Posters.jpg");
background-size: 100%;
}
#Information {
width:20%;
margin:0 auto;
}
#searchbox
{
background-color: #eaf8fc;
background-image: linear-gradient(#fff, #d4e8ec);
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 500px;
height: 35px;
padding: 10px;
margin: 100px auto 50px;
overflow: hidden;
}
#search,
#myBtn {
float: left;
}
#search {
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255,
255, 1);
}
#myBtn
{
background-color: #6cbb6b;
background-image: linear-gradient(#95d788, #6cbb6b);
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#myBtn:hover {
background-color: #95d788;
background-image: linear-gradient(#6cbb6b, #95d788);
}
#myBtn:active {
background: #95d788;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#myBtn::-moz-focus-inner {
border: 0;
}
/*
.modal-content {
width: 80%;
}
.modal-header {
background-color: white;
text-align: center;
}
*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
</script>
<script src="film.js"></script>
<div class="search_bar">
<form onsubmit="return false" id="searchbox" action="">
<input type="text" id="search" placeholder="movie title">
<input name ="myBtn" id ="myBtn" type="submit" value="search">
</form>
</div>
<div name ="myModal" id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span name="close" class="close">x</span>
<h1 id="title"></h1>
<div class="modal-body">
<img src="">
<h2 id="year"></h2>
<h2 id="Director"></h2>
<h2 id="rating"></h2>
<p id="plot" style="font-size:23px"></p>
</div>
</div>
</div>
</div>
和善良的网络开发人员，
下面贴出了 HTML、CSS 和 JavaScript 代码
我正在使用 OMDB API 在搜索时从其电影数据库中检索信息。 API 完美运行。但是，我的模态功能在搜索时没有弹出，"close"功能也不起作用。
此外，这是我从 Safari 的 Web Inspector 得到的错误：
TypeError: undefined is not an object (evaluating 'span.onclick = >function() { modal.style.display = "none";}')
提前致谢！
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
</script>
<script src="film.js"></script>
<div class="search_bar">
<form onsubmit="return false" id="searchbox" action="">
<input type="text" id="search" placeholder="movie title">
<input name ="myBtn" id ="myBtn" type="submit"
onclick="getMovie()" value="search">
</form>
</div>
<div name ="myModal" id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span name="close" class="close">x</span>
<h1 id="title"></h1>
<div class="modal-body">
<img src="">
<h2 id="year"></h2>
<h2 id="Director"></h2>
<h2 id="rating"></h2>
<p id="plot" style="font-size:23px"></p>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript
function getMovie()
{
$.ajax({
type: "get",
url: "http://www.omdbapi.com/?",
data: {
t: document.getElementById('search').value,
type: 'movie'
},
success: function (movies) {
document.getElementById('title').innerHTML = movies.Title;
$('.modal-header img').attr("src", movies.Poster);
document.getElementById('year').innerHTML = "Year: " + movies.Year;
document.getElementById('rating').innerHTML = "Rating: " +
movies.Rated;
document.getElementById('Director').innerHTML = "Director: " +
movies.Director;
document.getElementById('plot').innerHTML = "Plot: " + movies.Plot;
}
} );
}
var modal = document.getElementsByName('myModal');
// Get the button that opens the modal
var btn = document.getElementsByName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
CSS
body{
background-image: url("http://kosmosaicbooks.com/wp-
content/uploads/2012/01/Favorite-Sci-Fi-Posters.jpg");
background-size: 100%;
}
#Information {
width:20%;
margin:0 auto;
}
#searchbox
{
background-color: #eaf8fc;
background-image: linear-gradient(#fff, #d4e8ec);
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 500px;
height: 35px;
padding: 10px;
margin: 100px auto 50px;
overflow: hidden;
}
#search,
#myBtn {
float: left;
}
#search {
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255,
255, 1);
}
#myBtn
{
background-color: #6cbb6b;
background-image: linear-gradient(#95d788, #6cbb6b);
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#myBtn:hover {
background-color: #95d788;
background-image: linear-gradient(#6cbb6b, #95d788);
}
#myBtn:active {
background: #95d788;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#myBtn::-moz-focus-inner {
border: 0;
}
/*
.modal-content {
width: 80%;
}
.modal-header {
background-color: white;
text-align: center;
}
*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
您可以按如下方式使用 jQuery：
$(function() {
var modal = $('#myModal');
// Get the button that opens the modal
var btn = $("#myBtn");
// Get the <span> element that closes the modal
var btnClose = $(".close");
function getMovie() {
$.ajax({
type: "get",
url: "https://www.omdbapi.com/?",
data: {
t: document.getElementById('search').value,
type: 'movie'
},
success: function (movies) {
$('#title').text(movies.Title);
$('.modal-header img').attr("src", movies.Poster);
$('#year').text("Year: " + movies.Year);
$('#rating').text("Rating: " + movies.Rated);
$('#Director').text("Director: " + movies.Director);
$('#plot').text("Plot: " + movies.Plot);
modal.fadeIn();
}
});
}
// When the user clicks the button, open the modal
btn.click(function(event) {
event.preventDefault();
getMovie();
});
// When the user clicks on <span> (x), close the modal
btnClose.click(function() {
modal.fadeOut();
});
// When the user clicks anywhere outside of the modal, close it
$(window).click(function(event) {
if (!$(event.target).closest(modal).length) {
modal.fadeOut();
}
});
});
body{
background-image: url("http://kosmosaicbooks.com/wp-
content/uploads/2012/01/Favorite-Sci-Fi-Posters.jpg");
background-size: 100%;
}
#Information {
width:20%;
margin:0 auto;
}
#searchbox
{
background-color: #eaf8fc;
background-image: linear-gradient(#fff, #d4e8ec);
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 500px;
height: 35px;
padding: 10px;
margin: 100px auto 50px;
overflow: hidden;
}
#search,
#myBtn {
float: left;
}
#search {
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255,
255, 1);
}
#myBtn
{
background-color: #6cbb6b;
background-image: linear-gradient(#95d788, #6cbb6b);
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#myBtn:hover {
background-color: #95d788;
background-image: linear-gradient(#6cbb6b, #95d788);
}
#myBtn:active {
background: #95d788;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#myBtn::-moz-focus-inner {
border: 0;
}
/*
.modal-content {
width: 80%;
}
.modal-header {
background-color: white;
text-align: center;
}
*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
</script>
<script src="film.js"></script>
<div class="search_bar">
<form onsubmit="return false" id="searchbox" action="">
<input type="text" id="search" placeholder="movie title">
<input name ="myBtn" id ="myBtn" type="submit" value="search">
</form>
</div>
<div name ="myModal" id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span name="close" class="close">x</span>
<h1 id="title"></h1>
<div class="modal-body">
<img src="">
<h2 id="year"></h2>
<h2 id="Director"></h2>
<h2 id="rating"></h2>
<p id="plot" style="font-size:23px"></p>
</div>
</div>
</div>
</div>