Адаптивное всплывающее окно не прокручивается снизу, поэтому его можно закрыть - PullRequest
Новая
       20

Адаптивное всплывающее окно не прокручивается снизу, поэтому его можно закрыть

1 голос
/ 03 апреля 2020

Я использую всплывающее окно из https://codepen.io/pedrobenoit91/pen/aJGzYg и смог настроить его, чтобы оно было отзывчивым. Вот моя тестовая страница: Тест реагирующего всплывающего окна Вот измененная кодировка, которую я использовал:

HTML5 Страница 

<script type="text/javascript" src="/js/popupwindow.js"></script>
<div class='popup'>
<div class='popwin'>
<span style="font-size:1.50em; color:#2e5c9d;">CIS Miami Is Here for Our Students &amp; Families</span>
<p>
<a href="/covid19.html">See what we're doing and view resources &#187;</a>
<br> 
COVID-19 is impacting our students and families in ways that no one could have possibly imagined. Communities In Schools of Miami remains dedicated to ensuring all
of our students and families have the crucial resources they urgently need at this time, but we can't do it without you.
<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>

  <div style="display:block; padding:0.50em 0;">
  <div class="btnOrange"><a class="btn" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=SDSKUTE5VQXCW&source=url"><b>DONATE TO CIS MIAMI <i class="fas fa-angle-double-right"></i></b></a></div>
  </div>
<div class="right"><a href='' class='close closepop'><i class="fas fa-times"></i> CLOSE</a></div>
</p>
</div>
</div>

SCRIPT 

$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});

STYLESHEET 

#overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000;
  filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; z-index:100; display:none; }
.popup { width:100%; margin:0 auto; display:none; position:fixed; top:0; left:0; z-index:101; } /* Added top and left for positioning */
.popwin { min-width:90%; width:90%; min-height:150px; margin:2.0em auto; background:#fff; position:relative; 
  z-index:103; padding:0.5em 1.0em; border-radius:5px; box-shadow:0 2px 5px #000; } /* Changed with to percentages for responsive. Margin determines height from top */
.popwin p { clear:both; color:#555555; /* text-align:justify; */ font-size:1.2em; font-family:sans-serif; }
.popwin a { text-decoration:none; }
.popwin p a { color:#d91900; font-weight:bold; }
.popwin .x { float:right; height:35px; left:0px; position:relative; top:-25px; width:34px; }
.popwin .x:hover { cursor:pointer; }

a.closepop:link, a.closepop:visited, a.closepop:active { text-decoration:none; color:#444; }
a.closepop:hover { color:#444; text-decoration:none; }

Это работает, но на небольших устройствах, таких как мой телефон, всплывающее окно не прокручивается, поэтому я не могу увидеть весь контент или добраться до кнопки, чтобы закрыть его , До сих пор я пробовал разные вещи без удачи. Любая помощь будет оценена.

...