Javascript不会在移动设备上关闭弹出窗口，在桌面上很好

我正在制作一个网站，你可以在这里查看：carlraymondhansen.com

我

不太擅长编码，所以我真的不知道我在这里做什么。但是我让网站在桌面上按照我想要的方式工作。移动设备同样有效，只是当您打开弹出窗口时，您无法像在桌面上那样关闭它。我想这样做，这样你就可以点击窗外的任何地方，它就会关闭。您可以在桌面设备上单击任意位置，而不是在移动设备上单击。我该如何解决这个问题？

以下是该网站的所有代码：

$(document).ready(function() {
  $('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel');
    var popURL = $(this).attr('href');
    var query = popURL.split('?');
    var dim = query[1].split('&');
    var popWidth = dim[0].split('=')[1];
    $('#' + popID).fadeIn().css({
      'width': Number(460)
    }).prepend('<a href="#"             class = "close" > < /a>');
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;
    $('#' + popID).css({
      'margin-top': -popMargTop,
      'margin-left': -popMargLeft
    });
    $('body').append('<div id="fade"></div>');
    $('#fade').css({
      'filter': 'alpha(opacity=80)'
    }).fadeIn();
    return false;
  });
  $('a.close, #fade').live('click', function() {
    $('#fade , .popup_block').fadeOut(function() {
      $('#fade, a.close').remove();
    });
    return false;
  });
});

body {
  background-image: url(https://i.imgur.com/Y4eYm05.jpg);
  background-attachment: relative;
  background-repeat: no-repeat;
}
.container {
  width: 100%;
  font-family: Cormorant Garamond;
  font-size: 20px;
  font-weight: 500;
  color: black;
  text-align: center;
  line-height: 1.5;
}
.container #card1 {
  width: 400px;
  height: 200px;
  background-color: white;
  margin: auto;
  top: 300px;
  position: relative;
  box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card1 #name {
  width: 400px;
  height: 200px;
  padding-top: 70px;
}
.container a {
  color: black;
  text-decoration: none;
}
.container #card2 {
  width: 400px;
  height: 200px;
  background-image: url(https://i.imgur.com/PkOy68G.gif);
  background-size: 400px 200px;
  margin: auto;
  top: 508px;
  position: relative;
  box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card3 {
  width: 400px;
  height: 200px;
  background-image: url(https://i.imgur.com/XRjMag8.gif);
  background-size: 400px 200px;
  margin: auto;
  top: 720px;
  position: relative;
  box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card4 {
  width: 400px;
  height: 200px;
  background-image: url(https://i.imgur.com/r9wm3Zv.gif);
  background-size: 400px 200px;
  margin: auto;
  top: 930px;
  position: relative;
  box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card5 {
  width: 400px;
  height: 200px;
  background-color: white;
  margin: auto;
  top: 1138px;
  position: relative;
  margin-bottom: 250px;
  box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card5 #contact {
  width: 400px;
  height: 200px;
  padding-top: 70px;
}
.popup_block {
  text-align: center;
  font-family: Cormorant Garamond;
  font-size: 18px;
  font-weight: 500;
  padding: 30px;
  width: 500px;
  display: none;
  background: #fff;
  float: left;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  -webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
}
*html #fade {
  position: absolute;
}
*html .popup_block {
  position: absolute;
}
#fade {
  display: none;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #000;
  opacity: 0.8;
}
.popup_block a {
  color: blue;
  text-decoration: none;
}
.popup_block a:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:500,700" rel="stylesheet">
  <!----------------------------------------->
  <!----------------------------------------->
  <div class="container">
    <div id="card1">
      <a href="#?w=500" rel="box4" class="poplight">
        <div id="name">Carl Raymond Hansen</br>Writer & Director</div </a>
    </div>
    <div id="card2">
      <a href="#?w=500" rel="box1" class="poplight"></a>
    </div>
    <div id="card3">
      <a href="#?w=500" rel="box3" class="poplight"></a>
    </div>
    <div id="card4">
      <a href="#?w=500" rel="box2" class="poplight"></a>
    </div>
    <div id="card5">
      <a href="#?w=500" rel="box5" class="poplight">
        <div id="contact">408 — 887 — 0157</br>carlraymondhansen@gmail.com</div>
      </a>
    </div>
  </div>
  <div class="content">
    <div id="blur"></div>
  </div>
  <!---------------------------------------->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <!---------------------------------------->
  <link rel="stylesheet" href="styles.css">
</head>
<!----------------------------------------->
<body>
  <div id="box1" class="popup_block">
    </br>
    Reel
    </br>
    Cinematography
    </br>
    </br>
    </br>
    <iframe width="400" height="224" src="https://www.youtube.com/embed/csUuikE2ZIg?showinfo=0" frameborder="0" allowfullscreen></iframe>
    </br>
    </br>
  </div>
  <div id="box3" class="popup_block">
    </br>
    — then Stupor —
    </br>
    Writer & Director
    </br>
    </br>
    <iframe width="400" height="224" src="https://www.youtube.com/embed/hmDk0CIPV7U?showinfo=0" frameborder="0" allowfullscreen></iframe>
    </br>
    </br>
  </div>
  <div id="box2" class="popup_block">
    </br>
    Calling Lisa
    </br>
    Writer & Director
    </br>
    </br>
    </br>
    <iframe width="400" height="224" src="https://www.youtube.com/embed/EkYuXxTvdFw?showinfo=0" frameborder="0" allowfullscreen></iframe>
    </br>
    </br>
  </div>
  <div id="box4" class="popup_block">
    </br>
    Currently Attending
    </br>
    Art Center College of Design
    </br>
    For Directing
    </br>
    </br>
    <a href="https://drive.google.com/file/d/1raabMEdIHw3PE1GgAFkAAYmfyahVAvfy/view?usp=sharing" target="_blank">Resume</a>
    </br>
    </br>
  </div>
  <div id="box5" class="popup_block">
    </br>
    Follow my Social Media
    </br>
    </br>
    <a href="https://twitter.com/absurdistbear" target="_blank">Twitter</a>
    </br>
    <a href="https://www.instagram.com/absurdistbear/" target="_blank">Instagram</a>
    </br>
    </br>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  <!----------------------------------------->
</body>
</html>

您可以使用tap事件使其在移动设备上运行。例：

$('a.close, #fade').on('tap', function() {
$('#fade , .popup_block').fadeOut(function() {
    $('#fade, a.close').remove();
    });
    return false;
});
});

参考： https://api.jquerymobile.com/tap/

尝试使用 vclick 事件，适用于桌面和移动设备：

$('a.poplight[href^=#]').on( "vclick", function() { ... } )

文档

相关内容

最新更新

热门标签：