Home>

There is a modal window

let modal= $ ('. modal');
let modalcontent;
let modalwindowopenflag;
let loginlink= document.getElementById ('loginlink');
//let modalwrapper= $ ('. modalwrapper');
//let modalcontnent= document.getElementsByClassName ('modal-content') [0];
let elemclose /*= document.getElementsByClassName ("closeregwindow") [0] * /;
loginlink.onclick= function () {
  /*$('.modal')*/
  if (modalwindowopenflag!= true) {
    modal.html ('<
div class= "modal-content" >
'+' <
div class= "modal-header" >
'+' <
span class= "closeregwindow" >
&
times; <
/span >
'+' <
h2 >
Login or registration <
/h2 >
'+' <
/div >
'+' <
div class= "modal-body" >
'+' <
div class= "contentreg" >
'+' <
p class= "username" >
<
b >
Login <
/b >
<
/p >
'+' <
div class= "eleminput" >
'+' <
input type= "text" placeholder= "Login" class= "inputusername" >
'+' <
/div >
'+' <
p class= "username" >
<
b >
Password <
/b >
<
/p >
'+' <
div class= "eleminput" >
'+' <
input type= "text" placeholder= "Password" class= "inputusername" >
'+' <
/div >
'+' <
/div >
'+' <
div class= "loginbuttons" >
'+' <
div class= "loginbtnitem1" >
'+' <
button type= "submit" class= "loginbtn" >
Login <
/button >
'+' <
/div >
'+' <
div class= "loginbtnitem2" >
'+' <
button type= "submit" class= "registrationbtn" >
Registration <
/button >
'+' <
/div >
'+' <
/div >
'+' <
/div >
'+' <
div class= "modal-footer" >
'+' <
h3 >
Modal footer <
/h3 >
'+' <
/div >
'+' <
/div >
');
  }
  modal.style.display= "block";
  console.log (modal.style.display);
  modalcontent= document.getElementsByClassName ('modal-content') [0];
  modalwindowopenflag= true;
  elemclose= document.getElementsByClassName ("closeregwindow") [0];
}
elemclose.onclick= function () {
  //modal.style.display= "none";
  modalcontent.remove ();
  modal.style.display= "none";
  modalwindowopenflag= false;
}
window.onclick= function (event) {
  if (event.target== modal) {
    modal.style.display= "none";
    modalwindowopenflag= true;
  }
} 
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba (0,0,0, .4);
  display: none;
  z-index: 15;
  /*
  padding-top: 20%;
  padding-bottom: 10%;
  padding-left: 25%;
  padding-right: 25%;
  * /
  /* text-align: center; * /
  vertical-align: middle;
}
.modal-content {
  z-index: 20;
  border: 1px solid #fff;
  padding: 15px;
  position: absolute;
  left: 35%;
  right: 35%;
  top: 20%;
  bottom: 10%;
  width: 30%;
  height: 70%;
  border-radius: 5px;
  /*
  margin-top: 20%;
  margin-bottom: 10%;
  margin-left: 25%;
  margin-right: 25%; * /
  /* margin: auto; * /
  /* margin-top: 20%; * /
  background-color: #fff;
}
.modal-header {
  border-bottom: 1px solid silver;
  position: relative;
}
.closeregwindow {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: -25px;
  font-size: 30px;
}
.loginsignuptext {
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 5px;
}
.contentreg {
    /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; * /
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    width: 100%;
}
.username {
    padding-top: 10px;
    padding-bottom: 10px;
}
.inputusername {
    /*
    margin-left: 15px;
    margin-right: 15px;
    * /
    width: 100%;
    height: 30px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgb (223, 223, 225);
    /* margin: auto; * /
    /* display: block; * /
}
.eleminput {
    width: 100%;
}
.modal-body {
    width: 100%;
}
.loginbtnitem1, .loginbtnitem2 {
    margin-top: 10px;
}
.loginbtn, .registrationbtn {
    background-color: rgb (0, 84, 166);
    width: 100%;color: white; height: 40px;
} 
<
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 (round 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" id= "loginlink" >
    <
! -<
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 class= "modal" >
<
/div >

When you click on Login (loginlink) Nothing happens

and throws the following error

that swear at lines

modal.style.display= "block";
elemclose.onclick= function () {...} 

under the line

if (modalwindowopenflag!= true) {
        modal.html ('<
div class= "modal-content" >
'+' <
div class= "modal-header" >
'+' <
span class= "closeregwindow" >
&
times; <
/span >
'+' <
h2 >
Login or registration <
/h2 >
'+' <
/div >
'+' <
div class= "modal-body" >
'+' <
div class= "contentreg" >
'+' <
p class= "username" >
<
b >
Login <
/b >
<
/p >
'+' <
div class= "eleminput" >'+' < input type= "text" placeholder= "Login" class= "inputusername" >
'+' <
/div >
'+' <
p class= "username" >
<
b >
Password <
/b >
<
/p >
'+' <
div class= "eleminput" >
'+' <
input type= "text" placeholder= "Password" class= "inputusername" >
'+' <
/div >
'+' <
/div >
'+' <
div class= "loginbuttons" >
'+' <
div class= "loginbtnitem1" >
'+' <
button type= "submit" class= "loginbtn" >
Login <
/button >
'+' <
/div >
'+' <
div class= "loginbtnitem2" >
'+' <
button type= "submit" class= "registrationbtn" >
Registration <
/button >
'+' <
/div >
'+' <
/div >
'+' <
/div >
'+' <
div class= "modal-footer" >
'+' <
h3 >
Modal footer <
/h3 >
'+' <
/div >
'+' <
/div >
');
        }

How to fix the error?

Do you have a script where it connects? It is a feeling that it is executed before downloading DOM.

nazarpunk2021-09-18 16:33:44

@Nazarpunk Inside $ (Document) .ready (Function () {... script}

krasnodarprogrammer2021-09-18 17:02:32

@Nazarpunk And you can first, the Display property is assigned, and then add content inside modal. If so, tell me which command it can be done (such as appendhtml -analogue modal.html ()).

krasnodarprogrammer2021-09-18 17:05:47

You are generally incomprehensible what is happening. Why do you use jQuery for Let Modal if the entire code is below Vanilla-JS? Use Document.QuerySelector () to access items.

nazarpunk2021-09-18 17:11:33

The JQuery object has no style property. You never learned to mix the code using jQuery, and JavaScript, working with DOM elements in the last six days.

Igor2021-09-18 17:30:05