Javascript 模式功能在搜索时不会弹出，并且；“关闭”；函数不'；关不上_Javascript_Jquery_Html_Css_Simplemodal

Javascript 模式功能在搜索时不会弹出，并且；“关闭”；函数不'；关不上

javascript jquery html css

Javascript 模式功能在搜索时不会弹出，并且；“关闭”；函数不'；关不上,javascript,jquery,html,css,simplemodal,Javascript,Jquery,Html,Css,Simplemodal,和善良的网络开发者 HTML、CSS和JavaScript代码发布在下面我使用OMDB API在搜索时从其电影数据库中检索信息。API工作得非常好。但是，我的模式功能在搜索时不会弹出，“关闭”功能也不起作用此外，这是我从Safari的Web Inspector得到的错误： TypeError:undefined不是对象（正在计算'span.onclick=>function（）{ modal.style.display=“无”；}'）提前谢谢你 HTML <!DOCTYPE ht

和善良的网络开发者

HTML、CSS和JavaScript代码发布在下面

我使用OMDB API在搜索时从其电影数据库中检索信息。API工作得非常好。但是，我的模式功能在搜索时不会弹出，“关闭”功能也不起作用

此外，这是我从Safari的Web Inspector得到的错误：

TypeError:undefined不是对象（正在计算'span.onclick=>function（）{ modal.style.display=“无”；}'）

提前谢谢你

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>

您可以按如下方式使用jQuery：

$（函数（）{
var modal=$（“#myModal”）；
//获取打开模式对话框的按钮
var btn=$（“myBtn”）；
//获取关闭模态的元素
var btnClose=$（“.close”）；
函数getMovie（）{
$.ajax({
键入：“获取”，
url:“https://www.omdbapi.com/?",
数据：{
t:document.getElementById（'search'）。值，
类型：“电影”
},
成功：功能（电影）{
$（'#title'）.text（movies.title）；
$（'.modal header img'）.attr（“src”，movies.Poster）；
$（“#年”）.text（“年：+movies.year）；
$（“#评级”）.text（“评级：+movies.Rated”）；
$（'#Director'）.text（“Director:+movies.Director”）；
$（'#plot'）.text（“plot:+movies.plot”）；
modal.fadeIn（）；
}
});
}
//当用户单击该按钮时，打开模式对话框
点击（功能（事件）{
event.preventDefault（）；
getMovie（）；
});
//当用户单击（x）时，关闭模式对话框
btnClose.click（函数（）{
模态衰减（）；
});
//当用户单击模式之外的任何位置时，将其关闭
$（窗口）。单击（函数（事件）{
如果（！$（事件.目标）.最近（模式）.长度）{
模态衰减（）；
}
});
});
正文{
背景图像：url（“http://kosmosaicbooks.com/wp-   
content/uploads/2012/01/Favorite Sci-Fi Posters.jpg”）；
背景大小：100%；
}
#信息{
宽度：20%；
保证金：0自动；
}
#搜索框
{
背景色：#eaf8fc；
背景图像：线性梯度（#fff，#d4e8ec）；
边界半径：35px；
边框宽度：1px；
边框样式：实心；
边框颜色：#c4d9df#a4c3ca#83afb7；
宽度：500px；
高度：35px；
填充：10px；
利润率：100px自动50px；
溢出：隐藏；
}
#搜索，
#myBtn{
浮动：左；
}
#搜寻{
填充：5px9px；
高度：23px；
宽度：380px；
边框：1px实心#a4c3ca；
字体：标准13px“投石机MS”，arial，helvetica；
背景#f1f1；
边界半径：50px 3px 50px；
长方体阴影：0 1px 3px rgba（0,0,0,0.25）插图，0 1px 0 rgba（255,255，
255, 1);            
}
#myBtn
{       
背景色：#6cbb6b；
背景图像：线性梯度（#95d788，#6cbb6b）；
边界半径：3px 50px 50px 3px；
边框宽度：1px；
边框样式：实心；
边框颜色：7eba7c#578e57#447d43；
长方体阴影：0 1px rgba（0,0,0,0.3），
0 1px 0 rgba（255，255，255，0.3）插图；
高度：35px；
利润率：0.10px；
填充：0；
宽度：90px；
光标：指针；
字体：粗体14px Arial，Helvetica；
颜色：#23441e；
文本阴影：0 1px 0 rgba（255255,0.5）；
}
#myBtn:悬停{
背景色：#95d788；
背景图像：线性梯度（#6cbb6b，#95d788）；
}   
#myBtn:活动{
背景#95d788；
大纲：无；
盒影：0 1px4pRGBA（0,0,0,0.5）插页；
}
#myBtn:：-moz焦点内部{
边界：0；
}
/*
.模态内容{
宽度：80%；
}
.模态标题{
背景色：白色；
文本对齐：居中；
}
*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：80%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
@关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
/*关闭按钮*/
.结束{
颜色：白色；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.模态标题{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
.模态体{填充：2px 16px；}
.模态页脚{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}

x

您可以使用jQuery执行以下操作：

$（函数（）{
var modal=$（“#myModal”）；
//获取打开模式对话框的按钮
var btn=$（“myBtn”）；
//获取关闭模态的元素
var btnClose=$（“.close”）；
函数getMovie（）{
$.ajax({
键入：“获取”，
url:“https://www.omdbapi.com/?",
数据：{
t:document.getElementById（'search'）。值，
类型：“电影”
},
成功：功能（电影）{
$（'#title'）.text（movies.title）；
$（'.modal header img'）.attr（“src”，movies.Poster）；
$（“#年”）.text（“年：+movies.year）；
$（“#评级”）.text（“评级：+movies.Rated”）；
$（'#Director'）.text（“Director:+movies.Director”）；
$（'#plot'）.text（“plot:+movies.plot”）；
modal.fadeIn（）；
}
});
}
//当用户单击该按钮时，打开模式对话框
点击（功能（事件）{
event.preventDefault（）；
getMovie（）；
});
//当用户单击
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";
  }
 }

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;
}