There is main.css, which is css of the frame of the main screen, and dialog.css, which is css of the dialog, using the dialog.
I brought both as below
<link rel="stylesheet" type="text/css" href="~~~">
But the problem was that the css of a certain part of the dialog was not applied strangely, so I turned it over to main.css and it was applied. What's the problem?
When I tried it as below, the dialog-background was not applied with css
test.html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/joinDialog.js"></script>
<link rel="stylesheet" type="text/css" href="css/joinDialog.css">
</head>
<body>
<div id="dialog-background"></div>
<div id="dialog-join">
<div="dialog-join-title">Membership</div>
<input type="mail" id="dialog-join-mail" name="mail" placeholder="email".">
<input type="password" id="dialog-join-password" name="password" placeholder="password".">
<input type="text" id="dialog-join-name" name="name" placeholder="name".">
<div id="dialog-join-check-first">
echo('<label><input type="checkbox" id="check-age" name="check_age"> Agree to terms and conditions of use 14 years old or older</label>
</div>
<div id="dialog-join-check-second">
<label><input type="checkbox" id="check-info" name="check_info"> Consent to Personal Information Handling Policy</label>
</div>
<div id="dialog-join-btn-wrap">
<div="dialog-join-join">Subscribe</div>
<divid="dialog-join-login">Login</div>
</div>
</div>
<div id="dialog-login">
<div="dialog-login-title">Login</div>
<input type="mail" id="dialog-login-mail" name="mail" placeholder="email".">
<input type="password" id="dialog-login-password" name="password" placeholder="Password" password.">
<div id="dialog-login-btn-wrap">
<divid="dialog-login-join">Subscribe</div>
<divid="dialog-login-login">Login</div>
</div>
</div>
</body>
</html>
joinDialog.css
<style type="text/css">
#dialog-background{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #aaaaaa;
opacity: 0.3;
z-index: 2000;
display: none;
}
/* Membership registration */
#dialog-join{
width: 80%;
position: absolute;
z-index: 2001;
background-color: white;
padding : 10px;
border: #89dbc9 solid 1px;
display: none;
}
#dialog-join-title{
font-size: 0.9em;
height: 6.70%;
margin-bottom: 3.09%;
}
#dialog-join-mail, #dialog-join-password, #dialog-join-name{
width: 99%;
display: block;
border: #68ae9f 1px solid;
border-radius: 2px;
background-color: white;
height: 7.73%;
margin-bottom: 5.67%;
}
#dialog-join-name{
margin-bottom: 6.70%;
}
#dialog-join-check-first{
height: 7.73%;
margin-bottom: 5.67%;
font-size: 0.9em;
color: #7f7c7d;
}
#dialog-join-check-second{
height: 7.73%;
margin-bottom: 3.60%;
font-size: 0.9em;
color: #7f7c7d;
}
#dialog-join-check-first input, #dialog-join-check-second input{
vertical-align: middle;
}
#dialog-join-btn-wrap{
width: 100%;
height: 22.68%;
position: relative;
bottom: 0;
}
#dialog-join-btn-wrap div{
display: block;
width: 100%;
height: 50%;
color: white;
text-align: center;
}
#dialog-join-join{
background-color: #55a0cf;
border: none;
border-radius: 2px;
line-height: 250%;
}
#dialog-join-login{
background-color: #ea668b;
border: none;
border-radius: 2px;
line-height: 250%;
}
/* Login */
#dialog-login{
width: 80%;
position: absolute;
z-index: 2001;
background-color: white;
padding : 10px;
border: #89dbc9 solid 1px;
display: none;
}
#dialog-login-title{
font-size: 0.9em;
height: 10.0%;
margin-bottom: 3.0%;
}
#dialog-login-mail, #dialog-login-password{
width: 99%;
display: block;
margin-bottom: 10px;
border: #68ae9f 1px solid;
border-radius: 2px;
background-color: white;
height: 15.0%;
margin-bottom: 5.0%;
}
#dialog-login-btn-wrap{
width: 100%;
height: 40%;
position: relative;
bottom: 0;
}
#dialog-login-btn-wrap div{
display: block;
width: 100%;
height: 50%;
color: white;
text-align: center;
}
#dialog-login-join{
background-color: #55a0cf;
border: none;
border-radius: 2px;
line-height: 300%;
}
#dialog-login-login{
background-color: #ea668b;
border: none;
border-radius: 2px;
line-height: 300%;
}
</style>
Add screenshot -----------------------------
Top of joinDialog.css
<style type="text/css">
and the bottom
</style>
Try deleting the .~
It's hard to understand the question, so I'm going to personally guess and write it down. If you assume that one command is the most basic situation where another command is overturned and executed first.
<link rel="stylesheet" type="text/css" href="~/dialog.css">
<link rel="stylesheet" type="text/css" href="~/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
I don't know if I understood the situation properly because I wrote it down. It would be nice if you could tell me the situation in more detail. After writing it all down, it seems that the css file is not connected properly and it's confusing. :)
=============After listening to the story in the comments, modify the content ============
I don't know because the main.css content is not in the question, but I personally think it conflicts with the main.css content. If I summarize the code you modified above from my side, #dialog-background is applied normally as in the attached image. Maybe it's a guess, but it doesn't look like the main.css or the other command was covered and applied.
© 2024 OneMinuteCode. All rights reserved.