dongzi3434 2017-06-22 09:18
浏览 50

使用PHP数据库Ajax时弹出框无法打开

I am using this PHP Database Ajax code by W3Schools.com

This is my code, inside the PHP File (as shown in w3schools). It is working in this snippet. Also working, when i use this in the HTML file (as shown in w3schools).

But when, i use this code in the PHP File, it is not working. What could possibly go wrong?

.playtrailer {
    background-color:#f2f2f2;
    color:red;
    font-weight:600;
    border:none;
    padding:10px 12px;
}

.playtrailer:hover {
    cursor:pointer;
    background-color:#e2e2e2;
}

#trailerdivbox {
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    top:0%;overflow:auto;
    background-color:rgb(0, 0, 0);
    background-color:rgba(0, 0, 0, 0.4);
}


.videoWrapper {
    position:relative;
    padding-bottom:56.25%;
    padding-top:25px;
    margin:auto;
    height:0;top:100px;
}
.videoWrapper iframe {
    position:absolute;
    max-width:560px;
    max-height:315px;
    width:95%;
    height:95%;
    left:0;
    right:0;
    margin:auto;
}
 <button id="playtrailer" class="playtrailer" data-src="naQr0uTrH_s"> Play Trailer &#9658; </button> 
 
  <button id="playtrailer" class="playtrailer" data-src="naaQr0uTrH_s"> Play Trailer &#9658; </button> 

<!-- Watch Video Pop-up box -->
<div id='close'>
  <div id='trailerdivbox'>
    <div class='videoWrapper'>
      <iframe id='video' class='trailervideo' width='560' height='315' data-src='https://www.youtube.com/embed/' src='about:blank' frameborder='0' allowfullscreen></iframe>
    </div>
  </div>
</div>


<!-- Script to open Pop-up box when someone click on watch video button -->
<script>
// Get the modal
var modal = document.getElementById('trailerdivbox');

// Get the button that opens the modal
var btn = document.querySelectorAll('.playtrailer')

function playVideo(src) {
  var video = document.getElementById('video');
  video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe
}

function resetVideo() {
  var video = document.getElementById('video');
  var src = video.src.replace('?autoplay=1', '');

  video.src = '';
  video.src = src;
}

// When the user clicks the button, open the modal 
btn.forEach(function(a){
a.onclick = function() {
  modal.style.display = "block";
  playVideo(this.dataset.src); // pass the src
}
})

var trailerbox = document.getElementById("close");

trailerbox.onclick = function() {
  modal.style.display = "none";
  resetVideo();
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    resetVideo();
  }
}
</script>

Edit: This is my HTML file (Copy/pasted from w3schools)

<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>
</html>

This is my PHP file (getuser.php)

<!DOCTYPE html>
<html>
<head>
<style>
.playtrailer {
    background-color:#f2f2f2;
    color:red;
    font-weight:600;
    border:none;
    padding:10px 12px;
}

.playtrailer:hover {
    cursor:pointer;
    background-color:#e2e2e2;
}

#trailerdivbox {
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    top:0%;overflow:auto;
    background-color:rgb(0, 0, 0);
    background-color:rgba(0, 0, 0, 0.4);
}


.videoWrapper {
    position:relative;
    padding-bottom:56.25%;
    padding-top:25px;
    margin:auto;
    height:0;top:100px;
}
.videoWrapper iframe {
    position:absolute;
    max-width:560px;
    max-height:315px;
    width:95%;
    height:95%;
    left:0;
    right:0;
    margin:auto;
}


</style>
</head>
<body>

 <button id="playtrailer" class="playtrailer" data-src="naQr0uTrH_s"> Play Trailer &#9658; </button> 

  <button id="playtrailer" class="playtrailer" data-src="naaQr0uTrH_s"> Play Trailer &#9658; </button> 

<!-- Watch Video Pop-up box -->
<div id='close'>
  <div id='trailerdivbox'>
    <div class='videoWrapper'>
      <iframe id='video' class='trailervideo' width='560' height='315' data-src='https://www.youtube.com/embed/' src='about:blank' frameborder='0' allowfullscreen></iframe>
    </div>
  </div>
</div>


<!-- Script to open Pop-up box when someone click on watch video button -->
<script>
// Get the modal
var modal = document.getElementById('trailerdivbox');

// Get the button that opens the modal
var btn = document.querySelectorAll('.playtrailer')

function playVideo(src) {
  var video = document.getElementById('video');
  video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe
}

function resetVideo() {
  var video = document.getElementById('video');
  var src = video.src.replace('?autoplay=1', '');

  video.src = '';
  video.src = src;
}

// When the user clicks the button, open the modal 
btn.forEach(function(a){
a.onclick = function() {
  modal.style.display = "block";
  playVideo(this.dataset.src); // pass the src
}
})

var trailerbox = document.getElementById("close");

trailerbox.onclick = function() {
  modal.style.display = "none";
  resetVideo();
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    resetVideo();
  }
}
</script>

</body>
</html>
</div>
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
    • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
    • ¥50 树莓派安卓APK系统签名
    • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
    • ¥65 汇编语言除法溢出问题
    • ¥15 Visual Studio问题
    • ¥20 求一个html代码,有偿
    • ¥100 关于使用MATLAB中copularnd函数的问题
    • ¥20 在虚拟机的pycharm上
    • ¥15 jupyterthemes 设置完毕后没有效果