JS 弹出窗口在 Safari 上不起作用(隐藏/显示) [英] JS popup is not working on Safari (hide/show)

问题描述

简单的 js 弹出窗口不适用于 iPhone 和 iPad

尝试将 href="javascript:PopUpShow()" 替换为 onclick="PopUpShow()"，但还是一样，它适用于除 Safari 之外的任何地方

点击我</a><div onclick="PopUpShow()"><i class="fas fa-phone"></i>

<div class="b-popup" id="popup1"><div class="b-popup-content"><a class="b-popup-close" href="javascript:PopUpHide()"><div class="col-md-4 col-12 padding-pop"><div class="right-cont-pop" id="pop-hide">关闭</a></div></div><div class="row"><div class="col-md-4 col-12 padding-pop"><i class="fas fa-phone"></i></div><div class="col-md-4 col-12 padding-pop"><i class="fas fa-phone"></i></div><div class="padding-pop-text">blabla i'm pop up</div>

这是我的JS代码

function PopUpShow(){$("#popup1").show();}函数弹出隐藏(){$("#popup1").hide();}

和CSS

.b-popup .b-popup-content a{颜色:#000；字体粗细:500；}.mobil-icons {显示:块；右:0px；位置:绝对；z-索引:999；填充顶部:10px;}.b-弹出{显示:无；最小高度:100%；溢出:隐藏；位置:固定；顶部:0px;}.b-popup .b-popup-content{边距:38px 自动 0px 自动；宽度:250px；高度:250px；填充:10px；背景色:#fff;位置:固定；顶部:0；右:0;}.b-弹出关闭{颜色:#000；字体粗细:500；文字装饰:无；}

请帮我解决这个问题！

解决方案

看起来，问题根本不在 JS 中.显示:弹性；"使整个弹出窗口完全不可见.我的意思是弹出窗口一直在那里，我点击了它的链接！只是将其更改为阻止"并出现.但我有一个问题要问 Safari 开发者...WTF?

Simple popup with js is not working on IPhone and IPad

Tried to replace href="javascript:PopUpShow()" to onclick="PopUpShow()", but still the same, it works everywhere but Safari

<a href="javascript:PopUpShow()" id="pop-show">click me</a>
<div onclick="PopUpShow()"><i class="fas fa-phone"></i> </div>
<div class="b-popup" id="popup1">
<div class="b-popup-content">
<a class="b-popup-close" href="javascript:PopUpHide()">
<div class="col-md-4 col-12 padding-pop">  <div class="right-cont-pop" id="pop-hide"> close </a></div></div>
<div class="row">
<div class="col-md-4 col-12 padding-pop"><i class="fas fa-phone"></i></div>
<div class="col-md-4 col-12 padding-pop"><i class="fas fa-phone"></i></div>
<div class="padding-pop-text">blabla i'm pop up</div>
</div>
</div>
</div>

This is my JS code

function PopUpShow(){
$("#popup1").show();
}
function PopUpHide(){
$("#popup1").hide();
 }

And css

.b-popup .b-popup-content a{
color: #000;
font-weight: 500;}


.mobil-icons {
display: block;
right: 0px;
position: absolute;
z-index: 999;
padding-top: 10px;}


.b-popup{
display: none;
min-height: 100%;
overflow: hidden;
position: fixed;
top: 0px;}

.b-popup .b-popup-content{
margin: 38px auto 0px auto;
width: 250px;
height: 250px;
padding: 10px;
background-color: #fff;
position: fixed;
top: 0;
right: 0;}

.b-popup-close {
color: #000;
font-weight: 500;
text-decoration: none;}

Please, help me to resolve this problem!

解决方案

As it appears, the problem was not in JS at all. "display: flex;" made the whole popup absolutely invisible. I mean the popup was there the whole time, I tapped at the link on it! Just changed it to "block" and it appeared. But I have a question to Safari developers... WTF?

这篇关于JS 弹出窗口在 Safari 上不起作用(隐藏/显示)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！