搜索时不会弹出模态功能，并且＆＃34;关闭＆＃34;功能不关闭

时间：2016-06-23 04:35:42

标签： javascript jquery html css simplemodal

和善良的网络开发者，

HTML，CSS和JavaScript代码发布在

下面

我正在使用OMDB API在搜索时从其电影数据库中检索信息。 API工作得很好。但是，我的模态功能在搜索时不会弹出，并且＆＃34;关闭＆＃34;功能也不起作用。

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

  

TypeError：undefined不是对象（评估＆＃39; span.onclick =＆gt; function（）{   modal.style.display =＆＃34; none＆＃34 ;;}＆＃39;）

提前谢谢！

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

1 个答案:

答案 0 :(得分：0)

您可以使用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>

相关问题
最新问题