#html #css
Вопрос:
Я создал это всплывающее окно, используя HTML и CSS. Я использую это всплывающее окно для создания страницы политики конфиденциальности, но проблема в том, что с этим всплывающим окном, чем больше информации у меня было во всплывающем окне, содержимое вверху исчезает, я не уверен, почему он это делает, я удалил некоторое содержимое этой страницы, чтобы я могопубликуйте код. Я помогаю, вы можете помочь?
Спасибо
HTML
/* Pop up */
.popup {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 3000;
overflow-y: scroll;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@supports ( (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
.popup {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.3);
}
}
.popup .header__logo-box {
height: 100px;
margin-top: 10rem;
}
.popup__content .heading-secondary {
font-size: 2rem;
}
.popup__content .heading-tertiary {
font-size: 1.5rem;
}
.popup__content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50%;
background-color: #fff;
-webkit-box-shadow: 0 2rem 4rem rgba(117, 94, 94, 0.2);
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(0.25);
transform: translate(-50%, -50%) scale(0.25);
-webkit-transition: all 0.5s 0.2s;
transition: all 0.5s 0.2s;
text-align: center;
}
.popup:target {
opacity: 1;
visibility: visible;
}
.popup:target .popup__content {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
padding: 3rem;
}
.popup__close:link,
.popup__close:visited {
color: #777;
position: absolute;
top: 1rem;
right: 1rem;
font-size: 3rem;
text-decoration: none;
display: inline-block;
-webkit-transition: all 0.2s;
transition: all 0.2s;
line-height: 1;
}
.popup__close:hover {
color: var(--color-secondary);
}
.popup__close--pp:link,
.popup__close--pp:visited {
color: #777;
position: absolute;
top: 13rem;
right: 2rem;
font-size: 3rem;
text-decoration: none;
display: inline-block;
-webkit-transition: all 0.2s;
transition: all 0.2s;
line-height: 1;
}
.popup__close--pp:hover {
color: var(--color-secondary);
}
.popup__text {
text-align: left;
font-size: 1.2rem;
}
<div class="popup" id="popup--privacy">
<div class="popup__content">
<div class="popup__left">
<img src="img/Erpsoft__logo.gif" alt="ERP Soft Logo" class="header__logo-box" />
</div>
<div class="popup__right">
<a href="#footer" class="popup__close--pp">amp;times;</a>
<h2 class="heading-secondary">Privacy Policy</h2>
<p class="popup__text">
<b>Last updated: October 20, 2021</b><br /><br /> This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the
law protects You. We use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy. This Privacy Policy has been created with the help
of the Privacy Policy Generator.
</p>
<h2 class="heading-secondary">Interpretation and Definitions</h2>
<h3 class="heading-tertiary">Interpretation</h3>
<p class="popup__text">
The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
</p>
<h3 class="heading-tertiary">Definitions</h3>
<p class="popup__text">For the purposes of this Privacy Policy:</p>
<ul>
<li>
<p class="popup__text">
<b>Account</b> means a unique account created for You to access our Service or parts of our Service.
</p>
</li>
<li>
<p class="popup__text">
<b>Company</b> (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to Erpsoft.
</p>
</li>
<li>
<p class="popup__text">
<b>Cookies</b> are small files that are placed on Your computer, mobile device or any other device by a website, containing the details of Your browsing history on that website among its many uses.
</p>
</li>
<li>
<p class="popup__text">
<b>Country</b> refers to: United Kingdom
</p>
</li>
<li>
<p class="popup__text">
<b>Device</b> means any device that can access the Service such as a computer, a cellphone or a digital tablet.
</p>
</li>
<li>
<p class="popup__text">
<b>Personal Data</b> is any information that relates to an identified or identifiable individual.
</p>
</li>
<li>
<p class="popup__text"><b>Service</b> refers to the Website.</p>
</li>
<li>
<p class="popup__text">
<b>Service Provider</b> means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf
of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used.
</p>
</li>
</ul>
<h2 class="heading-secondary">
Collecting and Using Your Personal Data
</h2>
<h3 class="heading-tertiary">Types of Data Collected</h3>
<h3 class="heading-tertiary">Personal Data</h3>
<p class="popup__text">
While using Our Service, We may ask You to provide Us with certain personally identifiable information that can be used to contact or identify You. Personally identifiable information may include, but is not limited to:
</p>
<ul>
<li>
<p class="popup__text">Email address</p>
</li>
<li>
<p class="popup__text">First name and last name</p>
</li>
<li>
<p class="popup__text">Phone number</p>
</li>
<li>
<p class="popup__text">
Address, State, Province, ZIP/Postal code, City
</p>
</li>
<li>
<p class="popup__text">Usage Data</p>
</li>
</ul>
<h3 class="heading-tertiary">Usage Data</h3>
<p class="popup__text">
Usage Data is collected automatically when using the Service.<br /><br /> Usage Data may include information such as Your Device's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that You visit,
the time and date of Your visit, the time spent on those pages, unique device identifiers and other diagnostic data.<br /><br /> When You access the Service by or through a mobile device, We may collect certain information automatically, including,
but not limited to, the type of mobile device You use, Your mobile device unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile Internet browser You use, unique device identifiers and other diagnostic
data.
<br /><br /> We may also collect information that Your browser sends whenever You visit our Service or when You access the Service by or through a mobile device.
</p>
<h3 class="heading-tertiary">Tracking Technologies and Cookies</h3>
<p class="popup__text">
We use Cookies and similar tracking technologies to track the activity on Our Service and store certain information. Tracking technologies used are beacons, tags, and scripts to collect and track information and to improve and analyze Our Service. The
technologies We use may include:
</p>
<ul>
<li>
<p class="popup__text">
<b>Cookies or Browser Cookies.</b> A cookie is a small file placed on Your Device. You can instruct Your browser to refuse all Cookies or to indicate when a Cookie is being sent. However, if You do not accept Cookies, You may not be able to
use some parts of our Service. Unless you have adjusted Your browser setting so that it will refuse Cookies, our Service may use Cookies.
</p>
</li>
<li>
<p class="popup__text">
<b>Flash Cookies.</b> Certain features of our Service may use local stored objects (or Flash Cookies) to collect and store information about Your preferences or Your activity on our Service. Flash Cookies are not managed by the same browser
settings as those used for Browser Cookies. For more information on how You can delete Flash Cookies, please read "Where can I change the settings for disabling, or deleting local shared objects?" available at
<a href="https://helpx.adobe.com/flash-player/kb/disable-local-shared-objects-flash.html#main_Where_can_I_change_the_settings_for_disabling__or_deleting_local_shared_objects_">https://helpx.adobe.com/flash-player/kb/disable-local-shared-objects-flash.html#main_Where_can_I_change_the_settings_for_disabling__or_deleting_local_shared_objects_</a
>
</p>
</li>
<li>
<p class="popup__text">
<b>Web Beacons.</b> Certain sections of our Service and our
emails may contain small electronic files known as web beacons
(also referred to as clear gifs, pixel tags, and single-pixel
gifs) that permit the Company, for example, to count users who
have visited those pages or opened an email and for other
related website statistics (for example, recording the
popularity of a certain section and verifying system and server
integrity).
</p>
</li>
</ul>
<p class="popup__text">
Cookies can be "Persistent" or "Session" Cookies. Persistent Cookies
remain on Your personal computer or mobile device when You go
offline, while Session Cookies are deleted as soon as You close Your
web browser. You can learn more about cookies here: Cookies by
TermsFeed Generator.
</p>
<p class="popup__text">
We use both Session and Persistent Cookies for the purposes set out
below:
</p>
<ul>
<li>
<p class="popup__text">
<b>Necessary / Essential Cookies</b>
</p>
<p class="popup__text">Type: Session Cookies</p>
<p class="popup__text">Administered by: Us</p>
<p class="popup__text">
Purpose: These Cookies are essential to provide You with
services available through the Website and to enable You to use
some of its features. They help to authenticate users and
prevent fraudulent use of user accounts. Without these Cookies,
the services that You have asked for cannot be provided, and We
only use these Cookies to provide You with those services.
</p>
</li>
<li>
<p class="popup__text">
<b>Cookies Policy / Notice Acceptance Cookies</b>
</p>
<p class="popup__text">Type: Persistent Cookies</p>
<p class="popup__text">Administered by: Us</p>
<p class="popup__text">
Purpose: These Cookies identify if users have accepted the use
of cookies on the Website.
</p>
</li>
<li>
<p class="popup__text">
<b>Functionality Cookies</b>
</p>
<p class="popup__text">Type: Persistent Cookies</p>
<p class="popup__text">Administered by: Us</p>
<p class="popup__text">
Purpose: These Cookies allow us to remember choices You make
when You use the Website, such as remembering your login details
or language preference. The purpose of these Cookies is to
provide You with a more personal experience and to avoid You
having to re-enter your preferences every time You use the
Website.
</p>
</li>
</ul>
<p class="popup__text">
For more information about the cookies we use and your choices
regarding cookies, please visit our Cookies Policy or the Cookies
section of our Privacy Policy.
</p>
<h2 class="heading-secondary">Use of Your Personal Data</h2>
<p class="popup__text">
The Company may use Personal Data for the following purposes:
</p>
<ul>
<li>
<p class="popup__text">
<b>To provide and maintain our Service,</b> including to monitor
the usage of our Service.
</p>
</li>
<li>
<p class="popup__text">
<b>To manage Your Account:</b> to manage Your registration as a
user of the Service. The Personal Data You provide can give You
access to different functionalities of the Service that are
available to You as a registered user.
</p>
</li>
<li>
<p class="popup__text">
<b>For the performance of a contract:</b> the development,
compliance and undertaking of the purchase contract for the
products, items or services You have purchased or of any other
contract with Us through the Service.
</p>
</li>
<li>
<p class="popup__text">
<b>To contact You:</b> To contact You by email, telephone calls,
SMS, or other equivalent forms of electronic communication, such
as a mobile application's push notifications regarding updates
or informative communications related to the functionalities,
products or contracted services, including the security updates,
when necessary or reasonable for their implementation.
</p>
</li>
<li>
<p class="popup__text">
<b>To provide You</b> with news, special offers and general
information about other goods, services and events which we
offer that are similar to those that you have already purchased
or enquired about unless You have opted not to receive such
information.
</p>
</li>
<li>
<p class="popup__text">
<b>To manage Your requests:</b> To attend and manage Your
requests to Us.
</p>
</li>
<li>
<p class="popup__text">
<b>For business transfers:</b> We may use Your information to
evaluate or conduct a merger, divestiture, restructuring,
reorganization, dissolution, or other sale or transfer of some
or all of Our assets, whether as a going concern or as part of
bankruptcy, liquidation, or similar proceeding, in which
Personal Data held by Us about our Service users is among the
assets transferred.
</p>
</li>
<li>
<p class="popup__text">
<b>For other purposes:</b> We may use Your information for other
purposes, such as data analysis, identifying usage trends,
determining the effectiveness of our promotional campaigns and
to evaluate and improve our Service, products, services,
marketing and your experience.
</p>
</li>
</ul>
<p class="popup__text">
We may share Your personal information in the following situations:
</p>
<ul>
<li>
<p class="popup__text">
<b>With Service Providers:</b> We may share Your personal
information with Service Providers to monitor and analyze the
use of our Service, to contact You.
</p>
</li>
<li>
<p class="popup__text">
<b>For business transfers:</b> We may share or transfer Your
personal information in connection with, or during negotiations
of, any merger, sale of Company assets, financing, or
acquisition of all or a portion of Our business to another
company.
</p>
</li>
<li>
<p class="popup__text">
<b>With Affiliates:</b> We may share Your information with Our
affiliates, in which case we will require those affiliates to
honor this Privacy Policy. Affiliates include Our parent company
and any other subsidiaries, joint venture partners or other
companies that We control or that are under common control with
Us.
</p>
</li>
<li>
<p class="popup__text">
<b>With business partners:</b> when You share personal
information or otherwise interact in the public areas with other
users, such information may be viewed by all users and may be
publicly distributed outside.
</p>
</li>
<li>
<p class="popup__text">
<b>With other users:</b> We may share Your information with Our
business partners to offer You certain products, services or
promotions.
</p>
</li>
<li>
<p class="popup__text">
<b>With Your consent:</b> We may disclose Your personal
information for any other purpose with Your consent.
</p>
</li>
</ul>
<h2 class="heading-secondary">Retention of Your Personal Data</h2>
<p class="popup__text">
The Company will retain Your Personal Data only for as long as is
necessary for the purposes set out in this Privacy Policy. We will
retain and use Your Personal Data to the extent necessary to comply
with our legal obligations (for example, if we are required to
retain your data to comply with applicable laws), resolve disputes,
and enforce our legal agreements and policies.<br /><br />
</p>
<h2 class="heading-secondary">Transfer of Your Personal Data</h2>
<p class="popup__text">
Your information, including Personal Data, is processed at the
Company's operating offices and in any other places where the
parties involved in the processing are located. It means that this
information may be transferred to — and maintained on — computers
located outside of Your state, province, country or other
governmental jurisdiction where the data protection laws may differ
than those from Your jurisdiction. <br /><br />
Your consent to this Privacy Policy followed by Your submission of
such information represents Your agreement to that transfer.<br /><br />
</p>
<h2 class="heading-secondary">Disclosure of Your Personal Data</h2>
<h3 class="heading-tertiary">Law enforcement</h3>
<p class="popup__text">
Under certain circumstances, the Company may be required to disclose
Your Personal Data if required to do so by law or in response to
valid requests by public authorities (e.g. a court or a government
agency).
</p>
<h3 class="heading-tertiary">Other legal requirements</h3>
<p class="popup__text">
The Company may disclose Your Personal Data in the good faith belief
that such action is necessary to:
</p>
<ul>
<li>
<p class="popup__text">Comply with a legal obligation</p>
</li>
<li>
<p class="popup__text">
Protect and defend the rights or property of the Company
</p>
</li>
<li>
<p class="popup__text">
Prevent or investigate possible wrongdoing in connection with
the Service
</p>
</li>
<li>
<p class="popup__text">
Protect the personal safety of Users of the Service or the
public
</p>
</li>
<li>
<p class="popup__text">Protect against legal liability</p>
</li>
</ul>
<h3 class="heading-tertiary">Security of Your Personal Data</h3>
<p class="popup__text">
The security of Your Personal Data is important to Us, but remember
that no method of transmission over the Internet, or method of
electronic storage is 100% secure. While We strive to use
commercially acceptable means to protect Your Personal Data, We
cannot guarantee its absolute security.
</p>
<h2 class="heading-secondary">Children's Privacy</h2>
<p class="popup__text">
Our Service does not address anyone under the age of 13. We do not
knowingly collect personally identifiable information from anyone
under the age of 13. If You are a parent or guardian and You are
aware that Your child has provided Us with Personal Data, please
contact Us. If We become aware that We have collected Personal Data
from anyone under the age of 13 without verification of parental
consent, We take steps to remove that information from Our servers.
<br /><br />
If We need to rely on consent as a legal basis for processing Your
information and Your country requires consent from a parent, We may
require Your parent's consent before We collect and use that
information.
</p>
<h2 class="heading-secondary">Links to Other Websites</h2>
<p class="popup__text">
Our Service may contain links to other websites that are not
operated by Us. If You click on a third party link, You will be
directed to that third party's site. We strongly advise You to
review the Privacy Policy of every site You visit. <br /><br />
We have no control over and assume no responsibility for the
content, privacy policies or practices of any third party sites or
services.
</p>
<h2 class="heading-secondary">Changes to this Privacy Policy</h2>
<p class="popup__text">
We may update Our Privacy Policy from time to time. We will notify
You of any changes by posting the new Privacy Policy on this page.
<br /><br />
We will let You know via email and/or a prominent notice on Our
Service, prior to the change becoming effective and update the "Last
updated" date at the top of this Privacy Policy. <br /><br />
You are advised to review this Privacy Policy periodically for any
changes. Changes to this Privacy Policy are effective when they are
posted on this page.
</p>
<h2 class="heading-secondary">Contact Us</h2>
<p class="popup__text">
If you have any questions about this Privacy Policy, You can contact
us:
</p>
<ul>
<li>
<p class="popup__text">By email: info@erpsoft.co.uk</p>
</li>
<li>
<p class="popup__text">
By visiting this page on our website:
<a href="www.erpsoft.co.uk">www.erpsoft.co.uk</a>
</p>
</li>
</ul>
</div>
</div>
</div>
Ответ №1:
У ваших имен классов CSS popup
возникли проблемы с opacity: 0;visibility: hidden;
и class popup__content
возникли проблемы с opacity: 0;
Becuase of opacity:0;
, и visibility: hidden;
содержимое страницы не отображается.
непрозрачность:
Свойство CSS opacity
— это первый способ, который может прийти вам в голову, чтобы изменить прозрачность. Но это свойство не может постоянно приходить на помощь, особенно когда есть фоновое изображение с текстом, которое вы хотите сделать прозрачным.
opacity
Свойство принимает значения от 0.0
до 1.0
, при 1
этом оно является значением по умолчанию для всех элементов. Чем меньше значение, тем прозрачнее. Итак, если элементу присвоена непрозрачность 0
, это будет invisible
.
видимость:
visibility
Свойство указывает, является ли элемент visible
.
Обновленный CSS:
.popup {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 3000;
overflow-y: scroll;
/* opacity: 0;
visibility: hidden; */
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@supports ( (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
.popup {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.3);
}
}
.popup .header__logo-box {
height: 100px;
margin-top: 10rem;
}
.popup__content .heading-secondary {
font-size: 2rem;
}
.popup__content .heading-tertiary {
font-size: 1.5rem;
}
.popup__content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50%;
background-color: #fff;
-webkit-box-shadow: 0 2rem 4rem rgba(117, 94, 94, 0.2);
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
/* opacity: 0; */
-webkit-transform: translate(-50%, -50%) scale(0.25);
transform: translate(-50%, -50%) scale(0.25);
-webkit-transition: all 0.5s 0.2s;
transition: all 0.5s 0.2s;
text-align: center;
}
.popup:target {
opacity: 1;
visibility: visible;
}
.popup:target .popup__content {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
padding: 3rem;
}
.popup__close:link,
.popup__close:visited {
color: #777;
position: absolute;
top: 1rem;
right: 1rem;
font-size: 3rem;
text-decoration: none;
display: inline-block;
-webkit-transition: all 0.2s;
transition: all 0.2s;
line-height: 1;
}
.popup__close:hover {
color: var(--color-secondary);
}
.popup__close--pp:link,
.popup__close--pp:visited {
color: #777;
position: absolute;
top: 13rem;
right: 2rem;
font-size: 3rem;
text-decoration: none;
display: inline-block;
-webkit-transition: all 0.2s;
transition: all 0.2s;
line-height: 1;
}
.popup__close--pp:hover {
color: var(--color-secondary);
}
.popup__text {
text-align: left;
font-size: 1.2rem;
}
Комментарии:
1. Привет, Джеба, спасибо, сэр, за вашу помощь. Я попробовал код, но он не работает. Может быть, лучше вместо того, чтобы усложнять ситуацию, я просто создаю страницу для страницы конфиденциальности?
2. @HimatVarsani Вы проверили демонстрационную ссылку? Вы можете видеть содержимое всплывающего окна? С какой проблемой вы столкнулись сейчас? Спасибо.
3. Содержимое не видно и такое маленькое. Я думаю, что было бы лучше создать отдельную страницу для конфиденциальности. Я хотел, чтобы всплывающее окно было таким, как показано изначально, которое я создал, но с прокруткой, чтобы увидеть все содержимое. Еще раз спасибо @jebasuthan за вашу любезную помощь
4. Привет @jebasuthan, я проверил демонстрационную ссылку, но проблема заключается в том, что содержимое и всплывающее окно кажутся настолько маленькими, что их не видно. Я хотел иметь содержимое исходного размера, но разрешить прокрутку и просмотр всего содержимого.