Home>

There is a modal window

let fullwindow= document.getElementById ('fullblock');
/* let modal= document.getElementById ('myModal'); * /
let modalcontent= document.getElementsByClassName ('modal-content') [0];
let loginlink= document.getElementsByClassName ('loginandsignup') [0];
let elemclose= document.getElementsByClassName ("closeregwindow") [0];
let footer= document.getElementById ('pageFooter');
let catalogbtn= document.getElementsByClassName ('catalogbutton') [0];
let inputfind= document.getElementsByClassName ('inputsearch') [0];
let searchbtn= document.getElementsByClassName ('searchbutton') [0];
loginlink.onclick= function () {
  //footer.style.backgroundColor= "white";
  catalogbtn.style.backgroundColor= "rgba (0,0,0,0.4)";
  inputfind.style.backgroundColor= "rgba (0,0,0,0.4)";
  searchbtn.style.backgroundColor= "rgba (0,0,0,0.4)";
  fullwindow.style.backgroundColor= "rgba (0,0,0,0.4)";
  //footer.style.backgroundColor= "white";
  modalcontent.style.display= "block";
}
elemclose.onclick= function () {
  modalcontent.style.display= "none";
}
window.onclick= function (event) {
  if (event.target== fullwindow) {
    modalcontent.style.display= "none";
  }
} 
.loginandsignup {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex: 10%;
  display: flex;
  justify-content: flex-start;
  align-self: center;
  cursor: pointer;
}
.modal-content {
  display: none;
  z-index: 6;
  position: fixed;
  /* position: relative; * /
  background-color: # E1BEE7;
  /*
    margin-top: 25%;
    margin-bottom: 25%;
    margin-left: 25%;
    margin-right: 25%;
    * /
  left: 50%;
  top: 50%;
  transform: translate (-50%, -50%);
  padding: 0;
  border: 5px solid # 7B1FA2;
  width: 50%;
  height: 50%;
  box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
  /* background-color: rgb (0,0,0); * /
  /* Fallback color * /
  background-color: rgba (0, 0, 0, 0.4);
  /* Black w /opacity * /
  /*
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
    * /
}
/*
@ -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}
}
* /
.closeregwindow {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.closeregwindow: hover,
.closeregwindow: focus {
  color: # 000;
  text-decoration: none;
  cursor: pointer;
}
.modal-header {
  padding: 2px 16px;
  background-color: # 9C27B0;
  color: white;
}
.modal-body {
  padding: 2px 16px;
}
.modal-footer {
  padding: 2px 16px;
  background-color: # 9C27B0;
  color: white;
} 
<
html >
<
head >
  <
! -<
link rel= "stylesheet" href= "testsite.css" >
->
  <
meta http-equiv= "Content-Type" content= "text /html; charset= UTF-8" >
  <
title >
Test Example <
/title >
  <
! -<
link rel= "stylesheet" href= "../simplebar /packages /simplebar /src /simplebar.css" >
<
/link >
->
  <
link rel= "stylesheet" href= "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
  <
link rel= "stylesheet" type= "text /css" href= "../css /commons.bundle.css" media= "all" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /subcategory.bundle.css" media= "all" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /vendors.bundle.css" media= "all" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /styles.css" media= "all" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /template.css" media= "all" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /vendors.css" media= "all" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /main.css" media= "all" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /fonts.bundle.css" media= "all" >
<
/link >
  <link rel= "stylesheet" type= "text /css" href= "../css /components.bundle.css" > <
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /components.css" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /common.css" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /headerIndex.css" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /indexIndex.css" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /styles__ltr.css" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /stylesheet.css" >
<
/link >
  <
! -<
link rel= "stylesheet" type= "text /css" href= "../css /testsite.css" >
<
/link >
->
  <
link rel= "stylesheet" type= "text /css" href= "../css /newtestsite.css" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /stylesheet.css" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../css /productcardblockstyle.css" >
<
/link >
  <
link rel= "stylesheet" type= "text /css" href= "../fonts /fonts.css" >
<
/link >
  <
link rel= "stylesheet" href= "../css /commonstylesformenuitems.css" >
<
/link >
  <
link rel= "stylesheet" href= "//fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic&
subset= latin, cyrillic "media="all ">
  <
script type= "text /javascript" src= "http://code.jquery.com/jquery-3.6.0.min.js" >
<
/script >
  <
script >
  <
/script >
<
/head >
<
body class= "bodyclass" >
  <
div id= "fullblock" >
    <
div id= "dropdownwindow" >
      <
div class= "contentdropdownwindow" >
        <
div class= "CatalogMenuLeft" >
          <
div class= "catalogheader" >
            <
div class= "flexline1" >
              <
div class= "crossline" >
              <
/div >
              <
div class= "flexdisabledscrollbar1" >
              <
/div >
            <
/div >
            <
div class= "flexline2" >
              <
div class= "windowheader" >
                <
h4 >
Catalog <
/h4 >
              <
/div >
              <
div class= "flexdisabledscrollbar2" >
              <
/div >
            <
/div >
            <
div class= "flexline3" >
              <
div class= "bottompart" >
              <
/div >
              <
div class= "flexdisabledscrollbar3" >
              <
/div >
            <
/div >
          <
/div >
          <
! -<
div class= "flexcontent" >
->
          <
div class= "windowmenulist" id= "menulist" >
            <
div class= "menulistitem" id= "smartphonesandgadgets" >
              Smartphones and gadgets
            <
/div >
            <
div class= "menulistitem" id= "notebooksandpcs" >
              Laptops and Computers
            <
/div >
            <
div class= "menulistitem" id= "tvsaudiovideohifi" >
              TVs, audio-video, Hi-Fi
            <
/div >
            <
div class= "menulistitem" id= "householdappliancesforhomeandkitchen" >
              Household appliances for home and kitchen
            <
/div >
            <
div class= "menulistitem" id= "constructionandrepair" >
              Construction and repair
            <
/div >
            <
div class= "menulistitem" id= "houseandcottage" >
              House and cottage
            <
/div >
            <
div class= "menulistitem" id= "photosvideossecuritysystems" >
              Photo, video, security systems
            <
/div >
            <
div class= "menulistitem" id= "automotiveproducts" >
              Car products
            </div > <
div class= "menulistitem" id= "officesuppliesfurnitureandofficeequipment" >
              Stationery, Furniture and Office Equipment
            <
/div >
            <
div class= "menulistitem" id= "beautyandhealth" >
              health and beauty
            <
/div >
            <
div class= "menulistitem" id= "sportsandrecreation" >
              Sports and recreation
            <
/div >
            <
div class= "menulistitem" id= "productsforgamers" >
              Products for gamers
            <
/div >
            <
div class= "menulistitem" id= "discountedproducts" >
              Discounted goods
            <
/div >
            <
div class= "menulistitem" id= "giftcertificates" >
              Gift certificates
            <
/div >
            <
div class= "menulistitem" id= "services" >
              Services and services
            <
/div >
          <
/div >
          <
! -<
/div >
->
        <
/div >
        <
div class= "myscroll" >
        <
/div >
        <
div id= "dropdownwindowright" >
          <
div class= "crosslineright" >
            <
div class= "close" >
&
times; <
/div >
          <
/div >
          <
div class= "CatalogMenuSearch" >
            <
div id= "SearchBlock" >
              <
div id= "SearchInputdiv" >
                <
input type= "search" placeholder= "Product search" id= "SearchInput" >
              <
/div >
              <
div id= "SearchButtondiv" >
                <
button id= "SearchButton" >
<
svg class= "Icon" width= "20" height= "20" viewBox= "0 0 24 24" fill= "none" xmlns= "http://www.w3.org/2000/svg" >
<
path fill-rule= "evenodd" clip-rule= "evenodd" d= "M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2115 15.2 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.2826.36123 153.7123 ">
<
/path >
<
/svg >
<
/button >
              <
/div >
            <
/div >
          <
/div >
          <
div class= "CatalogMenuRight" id= "CatalogMenuRight" >
          <
/div >
        <
/div >
      <
/div >
    <
/div >
    <
! -<
div class= "CatalogFreeSpace" >
<
/div >
->
    <
header id= "pageHeader" >
      <
div class= "headerinsides" >
        <
span class= "flexcitylinkwrapper" >
        <
a href= "#" class= "flexcitylink" >
                <
span class= "icon" >
                        <
svg aria-hidden= "true" class= "Sg" width= "16" height= "16" fill= "none" xmlns= "http://www.w3.org/2000/svg" >
<
path fill-rule= "evenodd" clip-rule= "evenodd" d= "M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z "fill="currentColor ">
<
/path >
<
/svg >
                <
/span >
        <
span class= "labelforicon" >
                 Krasnodar
                <
/span >
        <
/a >
        <
/span >
        <
span class= "intermediatespace" gt;
                <
/span >
        <
span class= "telephonenumber" >8 (800) 600 3900 (around the clock) <
/span >
        <
span class= "addressandworkschedule" >
                    Address and opening hours
                <
/span >
        <
span class= "payment" >
                    Payment
                <
/span >
        <
span class= "delivery" >
                    Delivery
                <
/span >
      <
/div >
      <
div class= "headerinsidessecondrow" id= "secondrowheader" >
        <
! -<
button class= "catalogbutton" >
Product catalog <
/button >
->
        <
button class= "catalogbutton" >
Product catalog <
/button >
        <
span class= "betweenspace" >
<
/span >
        <
span class= "findinfo" >
        <
input placeholder= "Search among 10,000 products" class= "inputsearch" >
<
/input >
        <
button class= "searchbutton" >
Find <
/button >
<
/span >
        <
span class= "secondbetweenspace" >
<
/span >
        <
span class= "loginandsignup" >
    <
! -<
div class= "loginandsignupinner" >
->
        <
div class= "loginsignupimg" >
            <
img src= "../images /header_profile-icon.png" >
        <
/div >
        <
div class= "loginsignuptext" >
            To come in
        <
/div >
    <
! -<
/div >
->
<
/span >
        <
span class= "basket" >
    <
span class= "loginsignupimg" >
        <
img src= "../images /header_cart-icon.png" >
    <
/span >
        <
span class= "loginsignuptext" >
        Basket
    <
/span >
        <
/span >
      <
/div >
    <
/header >
    <
! -<
div id= "myModal" class= "modal" >
->
    <
div class= "modal-content" id= "modaldialog" >
      <
div class= "modal-header" >
        <
span >
<
h2 >
Header of the modal window <
/h2 >
<
/span >
        <
span class= "closeregwindow" >
<
! -<
a href= "# secondrowheader" >
->
&
times; <
! -<
/a >
->
<
/span >
      <
/div >
      <
div class= "modal-body" >
        <
p >
Some text in the body of the modal window <
/p >
        <
p >
Another text ... <
/p >
      <
/div >
      <
div class= "modal-footer" >
        <
h3 >
Modal footer <
/h3 >
      <
/div >
    <
/div >
    <
! -<
/div >
->
    <
div class= "contentpart" >
      <
div class= "leftmenu" >
      <
/div >
      <
div class= "centerareawrapper" >
        <
div class= "centerarea" >
        <
/div >
        <
div id= "pagination" >
        <
/div >
      <
/div >
      <
div class= "rightmenu" >
      <
/div >
    <
/div >
    <
footer id= "pageFooter" >
      <
div class= "b-footer__container" >
        <
div class= "b-footer-menu" >
          <
div class= "b-footer-menu__column" >
            <
div class= "b-footer-menu__col" data-footer-col= "" >
              <
div class= "b-footer-menu__header" data-accordion-btn= "0" >
                <
a href= "https://www.svyaznoy.ru/store/about-us" >
              Online store
            <
/a >
                <
i class= "icon-angle-down-white b-footer-menu__header-icon is-mobile-only" >
<
/i >
              <
/div >
              <
ul class= "b-footer-menu__list" data-accordion-target= "0" style= "display: none;" >
                <
li class= "b-footer-menu__line" >
<a href= "https://www.svyaznoy.ru/store/about-us" class= "b-footer-menu__link" > About us <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/delivery" class= "b-footer-menu__link" >
Delivery <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/pay" class= "b-footer-menu__link" >
Payment <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/kredit" class= "b-footer-menu__link" >
Purchase on credit <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/e-catalog" class= "b-footer-menu__link" >
Electronic catalog <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/special-offers" class= "b-footer-menu__link" >
Promotions <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/news" class= "b-footer-menu__link" >
News <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/reviews" class= "b-footer-menu__link" >
Reviews <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/personal" class= "b-footer-menu__link" >
Terms of sale <
br >
 and processing policy <
br >
 personal data <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/services/card2card" class= "b-footer-menu__link" >
Money transfers <
br >
 from card to card <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/services/creditpayment" class= "b-footer-menu__link" >
Loan payment online <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/services/moneytransfer" class= "b-footer-menu__link" >
Online money transfers <
/a >
<
/li >
              <
/ul >
            <
/div >
          <
/div >
          <
div class= "b-footer-menu__column" >
            <
div class= "b-footer-menu__col" data-footer-col= "" >
              <
div class= "b-footer-menu__header" data-accordion-btn= "1" >
                <
a href= "https://www.svyaznoy.ru/store/company" >
              Company
            <
/a >
                <
i class= "icon-angle-down-white b-footer-menu__header-icon is-mobile-only" >
<
/i >
              <
/div >
              <
ul class= "b-footer-menu__list" data-accordion-target= "1" style= "display: none;" >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/history" class= "b-footer-menu__link" >
Who we are <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/catalog/elektronika-optom" class= "b-footer-menu__link" >
For corporate clients <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/owner_of_real" class= "b-footer-menu__link" >
For lessors <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/charity" class= "b-footer-menu__link" >
Charity <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<a href= "https://job.svyaznoy.ru/" target= "_blank" class= "b-footer-menu__link" > Working at Svyaznoy <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/contacts" class= "b-footer-menu__link" >
Contacts <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/anticorruption" class= "b-footer-menu__link" >
&Policy
nbsp; counteraction <
br >
corruption <
/a >
<
/li >
              <
/ul >
            <
/div >
          <
/div >
          <
div class= "b-footer-menu__column" >
            <
div class= "b-footer-menu__col" data-footer-col= "" >
              <
div class= "b-footer-menu__header" data-accordion-btn= "2" >
                <
a href= "https://www.svyaznoy.ru/store/help" >
              Buyer help
            <
/a >
                <
i class= "icon-angle-down-white b-footer-menu__header-icon is-mobile-only" >
<
/i >
              <
/div >
              <
ul class= "b-footer-menu__list" data-accordion-target= "2" style= "display: none;" >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/support/feedback/add-review" class= "b-footer-menu__link" >
Feedback <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/shops" class= "b-footer-menu__link" >
Store addresses <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/obmen_vozvrat_remont" class= "b-footer-menu__link" >
Exchange, return and repair <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/guarantee" class= "b-footer-menu__link" >
Warranty <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/support/repair-status" target= "_blank" class= "b-footer-menu__link" >
Repair status <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/support/contacts/addresses" target= "_blank" class= "b-footer-menu__link" >
Service center addresses <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/service" class= "b-footer-menu__link" >
Additional services and service <
/a >
<
/li >
              <
/ul >
            <
/div >
            <
div class= "b-footer-menu__col" data-footer-col= "" >
              <
div class= "b-footer-menu__header" data-accordion-btn= "3" >
                <
a href= "https://www.svyaznoy.ru/store/press_center" >
              Press center
            <
/a >
                <
i class= "icon-angle-down-white b-footer-menu__header-icon is-mobile-only" >
<
/i >
              <
/div >
              <
ul class= "b-footer-menu__list" data-accordion-target= "3" style= "display: none;" >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/history" class= "b-footer-menu__link" >
History <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/mission" class= "b-footer-menu__link" >
Mission and values ​​<
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/news/press" class= "b-footer-menu__link" >
Press releases <
/a >
<
/li >
                <li class= "b-footer-menu__line" > <
a href= "https://www.svyaznoy.ru/store/media_about_us" class= "b-footer-menu__link" >
Mass media about us <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://drive.google.com/open?id=1UhyjwJ6wZbUX-UxlFVTELnYi8bnxuhmg" target= "_blank" class= "b-footer-menu__link" >
Photos <
/a >
<
/li >
                <
li class= "b-footer-menu__line" >
<
a href= "https://www.svyaznoy.ru/store/contacts_for_media" class= "b-footer-menu__link" >
Press contacts <
/a >
<
/li >
              <
/ul >
            <
/div >
          <
/div >
          <
div class= "b-footer-menu__column" >
            <
div class= "b-footer-menu__col is-mobile-not" >
              <
div class= "b-footer-menu__contacts" >
                <
div class= "b-footer-menu__header _xl" >
                  <
a href= "tel: 84952870000" >
8 (495) 287-00-00 <
/a >
                <
/div >
                Online store
                <
div class= "b-footer-menu__header _xl" >
                  <
a href= "tel: 88007005000" >
8 (800) 700-50-00 <
/a >
                <
/div >
                Contact Support
                <
div class= "b-footer-menu__header _xl" >
                  <
a href= "tel: 88007009922" >
8 (800) 700-99-22 lt;
/a >
                <
/div >
                to corporative clients
              <
/div >
              <
div class= "b-footer-menu__socials" >
                <
a href= "https://www.facebook.com/svyaznoy.ru" target= "_blank" >
                  <
i class= "icon-fb" >
<
/i >
                <
/a >
                <
a href= "https://vk.com/svyaznoy" target= "_blank" >
                  <
i class= "icon-vk" >
<
/i >
                <
/a >
                <
a href= "https://twitter.com/svyaznoy_ru" target= "_blank" >
                  <
i class= "icon-twitter" >
<
/i >
                <
/a >
                <
a href= "https://www.instagram.com/svyaznoy_russia/?hl=ru" target= "_blank" >
                  <
i class= "icon-instagram" >
<
/i >
                <
/a >
              <
/div >
              <
div class= "b-footer-menu__ga" >
                <
a href= "https://play.google.com/store/apps/details?id=ru.svyaznoy.shop" target= "_ blank" class= "_ gp" data-app-logo-event= "" data-gtm-params= "{&
quot; eventContextGTM &
quot;: &
quot; https: \ /\ /play.google.com \ /store \ /apps \ /details? id= ru.svyaznoy.shop &
quot;, &
quot; eventLocationGTM &
quot;: &
quot; \ u0424 \ u0443 \ u0442 \ u0435 \ u0440 &
quot;} ">
<
/a >
<
br >
                <
a href= "https://apps.apple.com/ru/app/svaznoj-internet-magazin-elektroniki/id1062774471" target= "_ blank" class= "_ as" data-app-logo-event= "" data-gtm-params= "{&
quot; eventContextGTM &
quot;: &
quot; https: \ /\ /apps.apple.com \ /ru \ /app \ /svaznoj-internet-magazin-elektroniki \ /id1062774471 &
quot;, &
quot; eventLocationGTM &
quot;: &
quot; \ u0424 \ u0443 \ u0442 \ u0435 \ u0440 &
quot;} ">
<
/a >
                <
br >
                <
a href= "https://appgallery.cloud.huawei.com/marketshare/app/C102123139?locale=ru_RU&
amp; source= appshare &
amp; subsource= C102123139 "target="_ blank "class="_ ag "data-app-logo-event=""data-gtm-params="{&
quot; eventContextGTM &
quot;: &
quot; https: \ /\ /appgallery.cloud.huawei.com \ /marketshare \ /app \ /C102123139? locale= ru_RU &
amp; source= appshare &
amp; subsource= C102123139 &
quot;, &
quot; eventLocationGTM &
quot;: &
quot; \ u0424 \ u0443 \ u0442 \ u0435 \ u0440 &
quot;} ">
<
/a >
              <
/div >
            <
/div >
          <
/div >
        <
/div >
        <
div class= "b-footer-border" >
          <
div class= "b-footer-border__inner" >
<
/div >
        <
/div >< div class= "b-footer-rel" data-footer-col= "" >
          <
div class= "b-footer-menu__header is-mobile-only" data-accordion-btn= "4" >
            Other projects
            <
i class= "icon-angle-down-white b-footer-menu__header-icon is-mobile-only" >
<
/i >
          <
/div >
          <
div class= "b-footer-rel__list" data-accordion-target= "4" style= "display: none;" >
          <
/div >
        <
/div >
        <
div class= "b-footer-bottom" >
          <
div class= "b-footer-copy-wrapper" >
            <
div class= "b-footer-copy" >
© LLC "Network Svyaznoy" 2002—2021. All rights reserved. The price of goods indicated in the online store and the conditions for their purchase are valid as of the current date. <
/div >
          <
/div >
          <
a class= "b-footer-stop-covid _big lazy lazy-loaded" href= "https://ecomvscovid.ru/" target= "_ blank" style= "background-image: url (&
quot; https: //cdn.svyaznoy.ru/upload/web/svyaznoy/img/footer/covidlogo.svg&
quot;); ">
        Safe service area. Stop COVID.
      <
/a >
        <
/div >
        <
div class= "b-footer-contacts-mobile" >
          <
div class= "b-footer-contacts-mobile__row" >
            <
div class= "b-footer-menu__socials" >
              <
a href= "https://www.facebook.com/svyaznoy.ru" target= "_blank" >
                <
i class= "icon-fb" >
<
/i >
              <
/a >
              <
a href= "https://vk.com/svyaznoy" target= "_blank" >
                <
i class= "icon-vk" >
<
/i >
              <
/a >
              <
a href= "https://twitter.com/svyaznoy_ru" target= "_blank" >
                <
i class= "icon-twitter" >
<
/i >
              <
/a >
              <
a href= "https://www.instagram.com/svyaznoy_russia/?hl=ru" target= "_blank" >
                <
i class= "icon-instagram" >
<
/i >
              <
/a >
            <
/div >
            <
div class= "b-footer-contacts-mobile__right-col" >
              <
a class= "b-footer-stop-covid _small lazy" data-original= "https://cdn.svyaznoy.ru/upload/web/svyaznoy/img/footer/covidlogo.svg" href= "https: //ecomvscovid.ru/"target="_blank ">
            Safe service area. Stop COVID.
          <
/a >
              <
div class= "b-footer-contacts-mobile__tel" >
                <
a class= "b-footer-contacts-mobile__tel-link" href= "tel: 8 (495) 287-00-00" >
8 (495) 287-00-00 <
/a >
                <
div class= "b-footer-contacts-mobile__tel-descr" >
Online store <
/div >
              <
/div >
            <
/div >
          <
/div >
          <
div class= "b-footer-menu__ga _mobile" >
            <
a href= "https://play.google.com/store/apps/details?id=ru.svyaznoy.shop" target= "_ blank" class= "_ gp" data-app-logo-event= "" data-gtm-params= "{&
quot; eventContextGTM &
quot;: &
quot; https: \ /\ /play.google.com \ /store \ /apps \ /details? id= ru.svyaznoy.shop &
quot;, &
quot; eventLocationGTM &
quot;: &
quot; \ u0424 \ u0443 \ u0442 \ u0435 \ u0440 &
quot;} ">
<
/a >
            <
a href= "https://apps.apple.com/ru/app/svaznoj-internet-magazin-elektroniki/id1062774471" target= "_ blank" class= "_ as" data-app-logo-event= "" data-gtm-params= "{&
quot; eventContextGTM &
quot;: &
quot; https: \ /\ /apps.apple.com \ /ru \ /app \ /svaznoj-internet-magazin-elektroniki \ /id1062774471 &
quot;, &
quot; eventLocationGTM &
quot;: &
quot; \ u0424 \ u0443 \ u0442 \ u0435 \ u0440 &
quot;} ">
<
/a >
            <
a href= "https://appgallery.cloud.huawei.com/marketshare/app/C102123139?locale=ru_RU&
amp; source= appshare &
amp; subsource= C102123139 "target="_ blank "class="_ ag "data-app-logo-event=""data-gtm-params="{&
quot; eventContextGTM &
quot;: " https: \ /\ /appgallery.cloud.huawei.com \ /marketshare \ /app \ /C102123139? locale= ru_RU &source= appshare &
amp; subsource= C102123139 &
quot;, &
quot; eventLocationGTM &
quot;: &
quot; \ u0424 \ u0443 \ u0442 \ u0435 \ u0440 &
quot;} ">
<
/a >
          <
/div >
        <
/div >
      <
/div >
    <
/footer >
  <
/div >
  <
! -
<
script src= "js /commons.bundle.js. Untitled" >
<
/script >
<
script src= "js /subcategory.bundle.js. Untitled" >
<
/script >
 ->
  <
script type= "text /javascript" src= "http://code.jquery.com/jquery-3.6.0.min.js" >
<
/script >
  <
! -<
script src= "js /testsite3.js" >
<
/script >
->
  <
! -<
script src= "../simplebar /packages /simplebar /src /simplebar.js" >
<
/script >
->
  <
script type= "text /javascript" src= "../js /currentversion.js" >
<
/script >
<
/body >
<
/html >

The screen should dim when the modal window appears

fullwindow.style.backgroundColor= "rgba (0,0,0,0.4)";

but despite this the screen looks like this

The footer is not darkened. How do I make the screen dim completely?#Fullblock-this is an analogue of the full screen.modal(see @ humster_spb's answer).

@Igor Help please (you have helped me very much: maybe this time will help).

krasnodarprogrammer2021-09-19 14:12:12

Tighten everyone who can.

krasnodarprogrammer2021-09-19 14:12:12

It would be nice to immediately formulate the title of the question with a more specific content reflecting the essence of the question. This is very good. It is important and facilitates the search for answers to such questions in the future.

Alexandr_TT2021-09-19 14:12:12
  • Answer # 1

    Perhaps @igor will tell you directly according to your code, and I'll just give an example, how best to implement the model.

    In most cases, modal windows are designed according to such a scheme: there is a window itself, which has Position: Fixed stretching to the entire area of ​​the screen and creates the effect of dimming, and there is already a block inside Modal-content containing information:

    $ ('button'). ON ('Click', Function () {
        $ ('. Modal'). CSS ('DISPLAY', 'BLOCK');
    })
    $ ('. Close'). ON ('Click', Function () {
        $ ('. Modal'). CSS ('DISPLAY', 'NONE');
    }) 
    .modal {
      Position: Fixed;
      Top: 0;
      left: 0;
      Right: 0;
      Bottom: 0;
      background-color: rgba (0,0,0, .4);
      Display: None;
    }
    .modal-content {
      Border: 2px solid red;
      Padding: 15px;
      Max-width: 400px;
      margin: 20px auto 0;
      Background-Color: #FFF;
    }
    .modal-Header {
      Border Bottom: 1px Solid Silver;
      Position: relative;
    }
    .Close {
      CURSOR: POINTER;
      Position: Absolute;
      Right: 0;
      Top: -25px;
      Font-Size: 30px;
    } 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    DIV Class= "Modal" >
      ≪
    DIV Class= "Modal-Content" >
        ≪
    DIV Class= "Modal-Header" >
          ≪
    Span class= "Close" >
    &
    Times; <
    /span >
          ≪
    H2 >
    Cap of modal window <
    /h2 >
        ≪
    /div >
        ≪
    DIV Class= "Modal-Body" >
          ≪
    P >
    Some text in the body of the modal window <
    /P >
          ≪
    P >
    Another other text ... <
    /P >
        ≪
    /div >
        ≪
    DIV Class= "Modal-Footer" >
          ≪
    H3 >
    Futter modal window <
    /h3 >
        ≪
    /div >
      ≪
    /div >
    ≪
    /div >
    ≪
    H1 >
    Page title <
    /h1 >
    ≪
    P >
    Lorem Ipsum Dolor Sit Amet, Consertetur Adipisicing ELIT. Magnam Ducimus Non, Doloremque Voluptatibus Cupidate Qui Quas Dolores Quarat Porro Eligendi Velit, Architecto, Laboriosam Veniam Suscipit. Quasi, ET Inventore! Totam, Commodi! ≪
    /P >
    ≪
    P >
    Lorem Ipsum Dolor Sit Amet, Consertetur Adipisicing ELIT. Magnam Ducimus Non, Doloremque Voluptatibus Cupidate Qui Quas Dolores Quarat Porro Eligendi Velit, Architecto, Laboriosam Veniam Suscipit. Quasi, ET Inventore! Totam, Commodi! ≪
    /P >
    ≪
    P >
    Lorem Ipsum Dolor Sit Amet, Consertetur Adipisicing ELIT. Magnam Ducimus Non, Doloremque Voluptatibus Cupidate Qui Quas Dolores Quarat Porro Eligendi Velit, Architecto, Laboriosam Veniam Suscipit. Quasi, ET Inventore! Totam, Commodi! ≪
    /P >
    ≪
    Button >
    Open Modal Window <
    /Button >
    

    I changed the question. There are considerations on a new question?

    krasnodarprogrammer2021-09-19 14:12:12

    Better to create a new question or leave edited the current question?

    krasnodarprogrammer2021-09-19 14:12:12

    @krasnodarprogrammer, in question you need to make a reproducible example of a specific problem -do not copy all the markup of the site with links, of which nothing is tightened here, and take only the desired piece of code, the necessary styles, scripts, all this is packaged in snippets, so that when you click on the button "Run code" could be viewed what is the problem. Now it is impossible to understand your code, alas, and in a snippet, it is not really reproduced.

    humster_spb2021-09-19 14:12:12