Question

首先我是使用js的新手，特别是这个脚本，但我希望你能看到过去，并帮助我找到一个解决方案:-)

好的，我的问题如下：

我尝试制作一个弹出窗口，向客户展示他们必须看到的东西。正如我所知道的，当点击底部的固定按钮时，我可以制作弹出窗口。但是当我点击（X）buttonTAG时，我点击显示图像时，我不希望它关闭。

任何能看到我做错的人？真希望如此： - *

祝你好运 Lasse Madsen

继承我的代码：

// When the user clicks on div, open the popup
function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

function myFunction2() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("hide");
}

.popup {
    position: fixed;
    bottom: 0%;
    display: inline-block;
    cursor: pointer;
    left: 10%;
    background-color: #efefef;
    padding: 10px 20px 10px 20px;
  display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 600px;
    height: 400px;
    background-color: #555;
    color: #fff;
    text-align: center;
    
    position: absolute;
    z-index: 1;
    bottom: 0%;
    left: 20%;
    margin-left: -80px;
}


/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

  
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  	0%   {top: 0px;}
    25%  {top: -360px;}
    50%  {top: -300px;}
    75%  {top: -360px;}
    100% {top: -360px;}
}

@keyframes fadeIn {
  	0%   {top: 0px;}
    25%  {top: -360px;}
    50%  {top: -300px;}
    75%  {top: -360px;}
    100% {top: -360px;}
}
  
  @media only screen and (min-width: 992px) {

.popup {
  display: block;
}
    
  }
  
#myFunction2{
	position:absolute;
    z-index: 999999;
    left:0%;
    top: 0%;
}

<div class="popup" onclick="myFunction()">P&aring;sketilbud &ndash; klik her! <span class="popuptext" id="myPopup"><img src="http://www.hjerm.dk/wp-content/uploads/2015/11/hjerm-billede-paa-vej.jpg" style="border: 1px solid #000;" /><button style="border-radius: 50%;" id="myFunction2">x</button></span>
</div>

Answer 1

需要从.popup类中删除display:none ..所有代码的其余部分都很好并且工作示例如下：

<html>
<head>
	<title></title>
</head>
<body>
<style type="text/css">/* Popup container - can be anything you want */
.popup {
    position: fixed;
    bottom: 0%;
    display: inline-block;
    cursor: pointer;
    left: 10%;
    background-color: #efefef;
    padding: 10px 20px 10px 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 600px;
    height: 400px;
    background-color: #555;
    color: #fff;
    text-align: center;
    
    position: absolute;
    z-index: 1;
    bottom: 0%;
    left: 20%;
    margin-left: -80px;
}


/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

  
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  	0%   {top: 0px;}
    25%  {top: -360px;}
    50%  {top: -300px;}
    75%  {top: -360px;}
    100% {top: -360px;}
}

@keyframes fadeIn {
  	0%   {top: 0px;}
    25%  {top: -360px;}
    50%  {top: -300px;}
    75%  {top: -360px;}
    100% {top: -360px;}
}
  
  @media only screen and (min-width: 992px) {

.popup {

  display: block;

   

}
    
  }
  
#myFunction2{
	position:absolute;
    z-index: 999999;
    left:0%;
    top: 0%;
}  
</style>


<div class="popup" onclick="myFunction()">P&aring;sketilbud &ndash; klik her! 
<span class="popuptext" id="myPopup"><img src="http://www.hjerm.dk/wp-content/uploads/2015/11/hjerm-billede-paa-vej.jpg" style="border: 1px solid #000;" /><button style="border-radius: 50%;" id="myFunction2">x</button></span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

function myFunction2() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("hide");
}
</script>

</body>
</html>

Html，css和Js - onclick显示/隐藏

1 个答案: