Question

我有一个问题是将YouTube视频放入弹出窗口。
问题是要插入它。我不能只用function targetChange(target, source) { Object.keys(source).forEach(function(key) { var s = source[key], t = target[key]; // shorthands for(var i = 0; i < s.length; i++) { // loop through s (source[key]) array t[t.length++] = s[i]; // add the current item to t (target[key]) array } }); console.log(target); } var source = { BasinId: [123], subBasinId: [45], SubBasinName: ["newSubBasin"] }; var target = { BasinId: [1, 2], subBasinId: [3, 4], SubBasinName: ["old1", "old2"] }; targetChange(target, source);来做。它没有显示视频:(。我将<iframe>放入div并且它无法正常工作。我将向您展示我的脚本，CSS样式和HTML。

我想像你一样点击弹出窗口，在这个弹出窗口中显示的是YouTube视频。

HTML

<iframe>

我也试过使用方法，它也不起作用：（。

的JavaScript

                        <div id="popupBox_1">
                            <div class="popupBoxWrapper">
                                <div class="popupBoxContent">
                                    <h3>Popup 1</h3>
                                    <embed width="420" height="315" src="https://www.youtube.com/watch?v=LRblJyq_4Ko">
                                </div>
                            </div>
                        </div>

CSS

    function toggle_visibility(id) {
    var e = document.getElementById(id);
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
}

window.onclick = function(event) {
    if (event.target == popupBox_1) {
        popupBox_1.style.display = "none";
    }
        if (event.target == popupBox_2) {
     popupBox_2.style.display = "none";
    }
    if (event.target == popupBox_3) {
        popupBox_3.style.display = "none";
    }
    if (event.target == popupBox_4) {
        popupBox_4.style.display = "none";
    }
    if (event.target == popupBox_5) {
        popupBox_5.style.display = "none";
    }
    if (event.target == popupBox_6) {
        popupBox_6.style.display = "none";
    }
    if (event.target == popupBox_7) {
        popupBox_7.style.display = "none";
    }
    if (event.target == popupBox_8) {
        popupBox_8.style.display = "none";
   }
   if (event.target == popupBox_9) {
        popupBox_9.style.display = "none";
    }
}

Answer 1

检查出来：

var modal = document.getElementById('myModal');

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

.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 {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

<button id="myBtn">Open Modal</button>

<div id="myModal" class="modal">

  <div class="modal-content">
    <span class="close">&times;</span>
    <iframe src="https://www.youtube.com/embed/LRblJyq_4Ko" frameborder="0" allowfullscreen></iframe>
  </div>

</div>

制作模态的算法不算好！
要在您的代码中加入YouTube视频，您应该使用<ifream>

将YouTube视频插入弹出窗口

1 个答案: