Я искал здесь уже несколько недель, пытаясь найти ответ. Я не видел ничего, что дублировало бы мою проблему, но я все равно попробовал несколько вещей, потому что они были близки, или из-за отчаяния. Итак, здесь я спрашиваю конкретно.
У меня есть личный кабинет на моем сайте, который предлагает игрокам блокнот для заметок. Это простая вещь, просто PHP запись в плоский файл, который использует JS, чтобы показать или скрыть всплывающее окно. На каждом протестированном устройстве размер экрана, разрешение, ОС и т. Д. c. Он работает отлично.
У меня тот же код и всплывающие окна на боковой панели в игровой зоне. Во всех Linux и Windows ОС, браузерах, экранах мобильных или настольных компьютеров она работает отлично, но на компьютерах iPhone, iPad и Ma c с Safari есть всплывающие окна (это проверено, игроки можно щелкать ссылки, писать и сохранять заметки и т. д. c), но всплывающие окна не отображаются. Они просто ... невидимы.
Я не эксперт по JS, и я не исключительный в PHP, но я чувствую, что просто упускаю что-то здесь, что глупо очевидно.
Надеюсь, кто-нибудь увидит, чего мне не хватает. Опять же, этот код работает как ожидаемая страница A, но не страница B, даже если это тот же код. Всплывающие окна в iOS устройствах, которые находятся на странице B, просто невидимы.
// Notepad PopUp
var note = document.getElementById('myNote');
var btn = document.getElementById("noteBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
note.style.display = "block";
}
span.onclick = function() {
note.style.display = "none";
}
// Help Links PopUp
var links = document.getElementById('myLinks');
var btn = document.getElementById("linksBtn");
var span = document.getElementsByClassName("close2")[0];
btn.onclick = function() {
links.style.display = "block";
}
span.onclick = function() {
links.style.display = "none";
}
window.onclick = function(event) {
if (event.target == links) {
links.style.display = "none";
}
}
.note, .links, .donate {
display: none;
position: fixed;
z-index: 1;
padding-top: 40px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
}
.note-content, .links-content, .donate-content {
position: relative;
background-color: #888;
margin: auto;
padding: 0;
width: 25em;
height: 30em;
text-align: center;
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
}
/* Don't forget the drop down animation */
@-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}
}
/* and the close buttons, if applicable */
.close, .close2, .close3 {
color: #FFF;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus, .close2:hover, .close2:focus, .close3:hover, .close3:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* Next we need the header, body, content and footers */
.note-header, .links-header, .donate-header {
min-height: 4em;
padding: 2px 16px;
background-color: #999;
color: #000;
position: relative;
}
.note-header p, .links-header p, .donate-header p {
color: #000;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.note-body, .links-body, .donate-body {
padding-top: 1em;
}
.note-body p, .donate-body p {
padding-top: 1em;
}
.links-body p {
padding-top: 1em;
font-size: 1.25em;
margin: 0.5em auto;
}
.links-body a:link, .links-body a:visited, .donate-body a:link, .donate-body a:visited {
color: #2D5986;
background: inherit;
}
.links-body a:hover, .donate-body a:hover {
color: #0099CC;
background: inherit;
text-decoration: underline;
}
textarea {
font-family: "Courier New", Georgia;
}
.info {
font-size: 8pt;
font-style: italic;
}
<div class="topbar">
<div class="topRight">
<ul>
<li><button id="forumBtn" class="curs">Member Forum</button></li>
<li><button id="memberBtn" class="curs">Member Portal</button></li>
<li><button id="noteBtn" class="curs">Open Notepad</button></li>
<li><button id="linksBtn" class="curs">Open Help Tools</button></li>
<li><button id="donateBtn" class="curs">Donate </button></li>
</ul>
</div>
<div id="myNote" class="note">
<div class="note-content">
<div class="note-header">
<span class="close">×</span>
<p>Member's Notepad</p>
</div>
<div class="note-body">
<p><form action="/pge.php" method="POST" name="note">
<textarea name="note" rows="20" cols="40">Hi! I'm a notepad!
</textarea>
<input type="submit" name="submit" value="Save Note"> <input type="submit" name="delNote" value="Delete Note" onclick="return confirm('Are you sure you want to do that?');"></form>
</p>
</div>
</div>
</div>
<div id="myLinks" class="links">
<div class="links-content">
<div class="links-header">
<span class="close2">×</span>
<p>Help Tools: Links and Resources</p>
</div>
<div class="links-body">
<p><a href="http://example.com/Tools/" target="_blank">Tools</a></p>
<p><a href="http://example.com/tools/" target="_blank">more Tools</a></p>
<p><a href="https://example.com/" target="_blank"> Converter</a></p>
<p><a href="http://google.com/" target="_blank">Google Search</a></p>
<p><a href="https://www.ecosia.org/" target="_blank">Ecosia Search</a></p>
</div>
</div>
</div>
<div id="myDon" class="donate">
<div class="donate-content">
<div class="donate-header">
<span class="close3">×</span>
<p>Ways to Help CWoT 2</p>
</div>
<div class="donate-body">
<p><a target="_blank" href="https://example.com">Donate</a><br><span class="info">a $3 (USD) donation</span></p>
</div>
</div>
</div>
</div><script src="../scripts/notepad.js"></script>