HTML - 如何让按钮打开不同的链接但制作通用的关闭按钮答案

【问题标题】：HTML - How to get buttons open different link but make a generalized close buttonHTML - 如何让按钮打开不同的链接但制作通用的关闭按钮
【发布时间】：2021-06-23 03:47:46
【问题描述】：

我想在左侧有不同的按钮，打开不同的链接，但我想让关闭按钮成为通用按钮。我不希望它关心打开不同链接的不同按钮，我只希望它关闭打开的任何视频（它有效）。但是，我希望这些按钮可以打开不同的链接。我怎样才能做到这一点？有人可以帮忙吗？

<!DOCTYPE html>
<html lang="hu">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-image: url('background.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            margin: 0;
            padding: 0;
        }
        
        .focim {
            color: white;
            margin-bottom: 50px !important;
            text-align: center;
        }
        
        #videoIframe {
            display: none;
            position: absolute;
            margin-left: 33vw;
            margin-top: -65vh;
            border-style: solid;
            border-width: 5px;
            border-color: white;
        }
        
        #videoIframe:hover {
            border-style: solid;
            border-width: 5px;
            border-color: rgba(231, 231, 10, 0.5);
        }
        
        #stop_vid {
            display: none;
            position: absolute;
            transition: 0.3s;
            padding: 5px 8px;
            text-align: center;
            text-decoration: none;
            font-size: 13px;
            margin: -520px 2px;
            cursor: pointer;
            border-radius: 50%;
            left: 90%;
            margin-bottom: 500px;
            background-color: rgba(250, 250, 250, 0.6);
        }
        
        #stop_vid:hover {
            background-color: rgba(255, 255, 255, 1);
            transform: rotate(90deg);
        }
        
        #open_vid {
            position: relative;
            text-align: center;
            transition: all ease 0.1s;
            margin-left: 50%;
            margin-right: 50%;
            background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
            background-color: #ffffff;
            border-radius: 42px;
            border: 3px solid #dcdcdc;
            display: inline-block;
            cursor: pointer;
            color: #666666;
            font-family: Georgia;
            font-size: 15px;
            font-weight: bold;
            padding: 10px 15px;
            text-decoration: none;
            transition: all ease 1s;
            margin-bottom: 20px;
            width: 13vw;
            overflow: hidden;
        }
        
        #open_vid:hover {
            background: linear-gradient(to bottom, #c4f6f6 5%, #fffff3 100%);
            background-color: #f6f6f6;
            width: 16vw;
        }
        
        #open_vid:active {
            position: relative;
            top: 1px;
        }
        
        @media all and (max-width:30em) {
            #open_vid {
                display: block;
                margin: 0.4em auto;
            }
        }
        
        .gombok {
            width: 50px;
            height: 500px;
        }
        
        @media screen and (max-width: 700px) {
            #videoIframe {
                width: 50vw;
                height: 300px;
            }
        }
        
        @media screen and (max-width: 700px) {
            #open_vid:hover {
                width: 50vw;
            }
            #open_vid {
                overflow: hidden;
            }
        }
        
        button:focus {
            outline: none;
        }
    </style>



</head>
</head>

<body>

    <body>
        <!--headline-->
        <div class="focim">
            <h1>Oktató videók: Matematika</h1>
        </div>

        <!--Buttons (gombok in hungarian)-->
        <div class="gombok">
            <button type="button" onclick="nyit()" id="open_vid">Lineáris és abszolút érték függvények ábrázolása</button>
            <button type="button" onclick="nyit()" id="open_vid">Négyzetes és gyökös függvények ábrázolása/elemzése</button>
            <button type="button" onclick="nyit()" id="open_vid">Egy ingás kísérlet</button>
        </div>

        <!--video closer button-->
        <div class="container">
            <button type="button" onclick="zar()" id="stop_vid"><i class="fa fa-close"></i></button>
        </div>

        <!--video links-->
        <div class="video_container">
            <div class="videoIframe">
                <iframe id="videoIframe" width="560" height="380" src="https://www.youtube.com/embed/h-paQtzKhZ8" frameborder="0" allowfullscreen=""></iframe>
                <iframe id="videoIframe" width="560" height="380" src="https://www.youtube.com/embed/Cr6gwI9NwXE" frameborder="0" allowfullscreen=""></iframe>
                <!--Teszt apex link-->
                <iframe id="videoIframe" width="560" height="380" src="https://youtube.com/embed/CG6MMLbGl_U" frameborder="0" allowfullscreen=""></iframe>
                <!--Teszt apex link-->
            </div>
        </div>




    </body>
<!--nyit = open, zar = close-->
    <script type="text/javascript">
        function zar() {
            document.getElementById("videoIframe").style.display = "none";

            var ysrc = document.getElementById("videoIframe").src;
            var newsrc = ysrc.replace("&autoplay=1", "");

            document.getElementById("videoIframe").src = newsrc;
            document.getElementById("stop_vid").style.display = "none";
            document.getElementById("open_vid").style.display = "inline-block";
        }

        function nyit() {
            document.getElementById("videoIframe").style.display = "inline-block";
            document.getElementById("stop_vid").style.display = "inline-block";
        }
    </script>

</body>

</html>

【问题讨论】：

标签： html button hyperlink

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 60%;
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
}

.modal-content iframe{
width:100%;
}

@-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: #000;
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;}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn" onclick="LoadVideo('vid_1')">Video-1</button>
<button id="myBtn" onclick="LoadVideo('vid_2')">Video-2</button>
<button id="myBtn" onclick="LoadVideo('vid_3')">Video-3</button>

<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
</div>
<div class="modal-body">
<iframe id="videoIframe" width="560" height="380" src="" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>

<script>
//OPEN MODAL
function LoadVideo(vid_id){
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
modal.style.display = "block";
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

//CHECK BUTTON_ID & LOAD VIDEO
switch (true){
case vid_id == "vid_1":
document.getElementById("videoIframe").src="https://www.youtube.com/embed/h-paQtzKhZ8";
break;

case vid_id == "vid_2":
document.getElementById("videoIframe").src="https://www.youtube.com/embed/Cr6gwI9NwXE";
break;

case vid_id == "vid_3":
document.getElementById("videoIframe").src="https://youtube.com/embed/CG6MMLbGl_U";
break;

default:
document.getElementById("videoIframe").src="";
break;
}
}


</script>
</body>
</html>

【讨论】：

哇。极好的。谢谢！ :D