I'm currently working on a component and keep hitting an annoying bug. I have a div which when clicked on, opens up a menu. This is contained in a react component which is in turn contained in another one.
Here's the CSS:
const FilterBox = styled("div")`
position: relative;
display: flex;
background-color: ${colours.silver};
border: 1px solid ${colours.silver};
border-radius: 4px;
padding: 4px;
height: 40px;
width: 40px;
align-items: center;
svg {
position: absolute;
vertical-align: middle;
display: inline-block;
margin-left: 4px;
text-align: center;
}
`;
const FilterMenu = styled("div")`
display: flex;
margin-top: 10px;
top: 13%;
right: 13vw;
background: #ffffff;
box-sizing: border-box;
-webkit-appearance: none;
box-shadow: 0px 2px 0px #dddee3;
border-radius: 4px;
display: ${(props) => (props.visible ? "block" : "none")};
label {
display: block;
width: 10vw;
margin: 10px;
padding-left: 10px;
}
span {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
display: flex;
align-items: center;
color: ${colours.night};
input {
margin-right: 8px;
width: 16px;
height: 16px;
border: 1px solid #0f7070;
box-sizing: border-box;
border-radius: 2px;
-webkit-appearance: none;
-moz-appearance: none;
:checked {
background-color: ${colours.green};
:after {
content: "\2714";
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: white;
z-index: 9999;
}
}
}
}
`;
For example:
It displays the menu etc, but the layout is messed up and I also don't think it will be at all responsive. Where am I going wrong?
https://codesandbox.io/s/affectionate-platform-zjg8m?file=/src/App.js
The order of your HTML is important.
First, move the FilterBox element to the top of the FilterMenu:
<FilterMenu visible>
<FilterBox
id="filterbox"
onClick={() => setFilterToggled(!isFilterToggled)}
/>
{isFilterToggled &&
allColumns.map((column) => (
<div key={column.id}>
<label>
<span>
<input type="checkbox" {...column.getToggleHiddenProps()} />{" "}
{column.Header}
</span>
</label>
</div>
))}
</FilterMenu>
Then add margin-left: auto to the FilterBox. Your styles would then be:
const FilterBox = styled("div")`
position: relative;
margin-left: auto;
display: flex;
background-color: silver;
border: 1px solid silver;
border-radius: 4px;
padding: 4px;
height: 40px;
width: 40px;
align-items: center;
svg {
position: absolute;
vertical-align: middle;
display: inline-block;
margin-left: 4px;
text-align: center;
}
`;
That should keep the element in the top-right corner at all times.
https://codesandbox.io/s/agitated-mountain-0rv2d?file=/src/App.js
Related
I'm a javascript novice, and I have a problem that bothers me~
I often need to write a function to click a button to pop up a modal. The interaction logic of this function is repeated, but sometimes the UI or copywriting needs to be adjusted~
So I want to know How can such a repetitive function be packaged into a component, and other pages need to use modal-like functions in the future, which can be directly referenced and only need to change the copy without rewriting CSS / HTML / JavaScript?
// 匯出 excel 彈窗 JS
$("*[data-modal]").on("click", Modeal);
function Modeal() {
$(".excel_popup").css("display", "flex");
$("body").css("overflow", "hidden");
// 關閉彈窗
$(document).on("click", function(e) {
if (
e.target.className == "close" ||
e.target.className == "excel_popup" ||
e.target.className == "btn_confirm" ||
e.target.className == "btn_consider"
) {
$("#js-job_excel_popup").css("display", "none");
$("body").css("overflow", "auto");
}
});
}
.excel_popup {
position: fixed;
z-index: 999999999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
display: none;
}
.excel_popup .excel_close_wrap {
width: 360px;
background-color: #fff;
padding: 16px 24px;
border-radius: 8px;
margin: 0 8px;
}
.excel_popup .excel_close_wrap header {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #222;
padding-bottom: 16px;
}
.excel_popup .excel_close_wrap header h2 {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
text-align: center;
}
.excel_popup .excel_close_wrap header .close {
position: absolute;
right: 0;
display: inline-block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
.excel_popup .excel_close_wrap .txt {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
text-align: center;
padding: 32px 0px;
color: #222;
}
.excel_popup .excel_close_wrap .btn_group {
display: flex;
justify-content: space-between;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.15px;
}
.excel_popup .excel_close_wrap .btn_group .btn_consider {
width: 132px;
text-align: center;
padding: 8px;
border-radius: 4px;
border: 1px solid #222;
margin-right: 4px;
cursor: pointer;
}
.excel_popup .excel_close_wrap .btn_group .btn_consider:hover {
border: 1px solid #222;
}
.excel_popup .excel_close_wrap .btn_group .btn_confirm {
width: 132px;
text-align: center;
padding: 8px;
border-radius: 4px;
border: 1px solid #222;
background-color: #222;
margin-left: 4px;
cursor: pointer;
color: #fff;
}
.excel_popup .excel_close_wrap .btn_group .btn_confirm:hover {
background-color: yellow;
border: 1px solid #222;
color: #222;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="excel_export" id="js-excel_export" href="javascript:;" data-modal="js-job_excel_popup">
<figure></figure>
<p>Click the popup</p>
</a>
<div class="excel_popup" id="js-job_excel_popup">
<div class="excel_close_wrap">
<header>
<h2>TITLE</h2>
<div class="close" id="js-close"></div>
</header>
<p class="txt">Hello World!!!</p>
<div class="btn_group">
<a class="btn_consider">Cancel</a>
<a class="btn_confirm">Send</a>
</div>
</div>
</div>
I want the search button to occupy all the space vertically
I have tried setting the height to 100% of the parent container but not working, I have tried setting the flex-basis to 100%/0/auto (not working). Look at my Code below and see the picture of the btn beside the input.
I want that btn to gain the height equal to the height of the input
See the Problem here
My Html:
<div className="search_subContainer">
<input
className="searchCity"
type="text"
value={value}
placeholder="Search city..."
onFocus={() => {
setFocus(!focus);
}}
onBlur={() => {
setFocus(!focus);
}}
onChange={handleChange}
/>
<button className="search_btn">
<IoSearch />
</button>
</div>
My Css:
.header .search_subContainer {
display: flex;
align-items: center;
align-content: stretch;
height: 100%;
border: 2px solid brown;
border-radius: 5px;
}
.header .searchCity {
width: 17em;
height: 100%;
padding: 0.3em 0.5em;
font-size: 0.9rem;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.377);
font-family: var(--secondary-font);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.header .searchCity:focus {
background-color: rgba(255, 255, 255, 0.719);
}
.search_btn {
width: 3em;
flex: 1;
height: 100%;
background-color: brown;
border: none;
font-size: 0.9rem;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
cursor: pointer;
}
.search_btn:hover {
background-color: cadetblue;
}
The culprit is caused by align-items: center. Adding that to a flex container with a direction of row aligns the flex children to the center vertically.
To fix this, remove that line and the search button should align with the input element.
Fix
.search_subContainer {
display: flex;
border: 2px solid brown;
border-radius: 5px;
}
Doing this also means no need to add a height and flex: 1 to the input container, input element, and button itself.
So
.search_btn {
width: 3em;
background-color: brown;
border: none;
font-size: 0.9rem;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
cursor: pointer;
}
.searchCity {
width: 17em;
padding: 0.3em 0.5em;
font-size: 0.9rem;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.377);
font-family: var(--secondary-font);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Just remove align-items: center; for container and container become stretch. Then you can align the icon inside the button using flex. It's the simplest and correct way, IMHO.
There Your go:
please avoid explicit height and width
simple:
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh
}
.header{
padding: .5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: 2px solid black;
}
.search-bar {
padding: 10px;
border: 1px solid lightgray;
margin-left: -5px;
}
.search-bar::placeholder {
color: black;
}
.submit-btn {
background-color: blue;
color: white;
padding: 11px;
font-size: 12px;
border-style: none;
margin-left: -5px;
}
<div class="header">
<div>
<a href='/'>tanjiro</a>
</div>
<div>
<input type="search" placeholder="Awesome" class="search-bar">
<button type="button" class="submit-btn">Search</button>
</div>
</div>
JavaScript Noob
On the footer of the site I'm trying to display the contact info with a popup like form
whenever I copied the code to new page or new device the button clicked opens the form
but then the form closes immediately
Is there a way to fix this?
<button class="open-button" onclick="openForm()">
Contact Us</button>
<div class="form-popup">
<form class="form-container" id="myForm">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>
<script>
function openForm() {
//openForm().stopPropagation();
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
And the CSS part:
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.form-container {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
I've already tried Google search solutions to no avail.
Also different methods from other helpful sites but every time I change something the button doesn't work at all.
After click on button the element with .form-popup class does not show because in your CSS you have set display:none:
.form-popup {
display: none;
....
}
So you need to set display:flex or block for .form-popup too.
Here is working sample:
function openForm() {
document.getElementById("myForm").parentElement.style.display = "flex";
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("myForm").parentElement.style.display = "none";
}
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.form-container {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
<button class="open-button" onclick="openForm()">
Contact Us
</button>
<div class="form-popup">
<form class="form-container" id="myForm">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>
#Alireza Ahmadi
Reposting the new code...
function openForm() {
document.getElementById("myForm").parentElement.style.display = "flex";
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("myForm").parentElement.style.display = "none";
}
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.div-form {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
<button class="open-button" onclick="openForm()">
Contact Us</button>
<div class="form-popup">
<div class="div-form" id="myForm">
<form class="form-container">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>
</div>
Right now the button doesn't do anything the page only shows that is refreshing
I would like to make the label and the checkbox on same size. May I ask how to change the CSS property for such problems?
The problem is illustrated on the screenshot.
[![checkbox and label][1]][1]
const viewTemplate = (
<div className="stack-small">
<div className="c-cb">
<input
id={props.id}
type="checkbox"
defaultChecked={props.completed}
onChange={() => props.toggleTaskCompleted(props.id)}
/>
<label className="todo-label" htmlFor={props.id}>
<p style={{ fontWeight: props.important ? 'bold' : 'normal' }}>{props.name}</p>
</label>
</div>
CSS
.c-cb {
box-sizing: border-box;
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.25;
display: block;
position: relative;
min-height: 44px;
padding-left: 40px;
clear: left;
}
.c-cb > label::before,
.c-cb > input[type="checkbox"] {
box-sizing: border-box;
top: -2px;
left: -2px;
width: 44px;
height: 44px;
display: inline-block;
}
.c-cb > input[type="checkbox"] {
-webkit-font-smoothing: antialiased;
cursor: pointer;
position: absolute;
z-index: 1;
margin: 0;
opacity: 0;
display: inline-block;
}
.c-cb > label {
font-size: inherit;
font-family: inherit;
line-height: inherit;
display: inline-block;
margin-bottom: 0;
padding: 8px 15px 5px;
cursor: pointer;
touch-action: manipulation;
}
.c-cb > label::before {
content: "";
position: absolute;
border: 2px solid currentColor;
background: transparent;
}
.c-cb > input[type="checkbox"]:focus + label::before {
border-width: 4px;
outline: 2px #228bec;
}
.c-cb > label::after {
box-sizing: content-box;
content: "";
position: absolute;
top: 11px;
left: 9px;
width: 18px;
height: 7px;
transform: rotate(-45deg);
border: solid;
border-width: 0 0 5px 5px;
border-top-color: transparent;
opacity: 0;
background: transparent;
}
.c-cb > input[type="checkbox"]:checked + label::after {
opacity: 1;
}
is there any CSS framework which needs to be installed to get rid of such problems?
[1]: https://i.stack.imgur.com/ZTQtn.gif
Use CSS flex with align-items: center; and justify-content: center; to align child elements
Use <label> as wrapper. Never place block-level elements (DIV, P, H1 etc) inside inline-level elements (like label, span etc).
/*QuickReset*/ * {margin:0;box-sizing:border-box;}
body {font:14px/1.4 sans-serif;}
/* CUSTOM-CHECKBOX */
.c-cb-label {
font-size: 1.6em;
display: flex; align-items: center;
cursor: pointer;
}
.c-cb-label::before {
content: " ";
display: flex; align-items: center; justify-content: center;
width: 1.5em; height: 1.5em;
margin-right: 0.3em;
border: 4px solid currentColor;
}
.c-cb :checked + .c-cb-label::before {
content: "\2714"; /* or use a font-icon (like icomoon) unicode hex */
}
<label class="c-cb">
<input hidden type="checkbox" name="test" />
<span class="c-cb-label">Prop name</span>
</label>
I created and it works perfectly ok But it only runs for one time, Means by clicking on a "Subscribe to Trade Alert" link a div box opens and says subscribe and have an x mark to close that div, but after closing If I again open a div by clicking a same link it is not working for the second time. I want it to run infinite.
heres the code:
.trade-alert
{
width: 180px;
height: 26px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
color: #333;
}
.subscription-trade-alert-box
{
width: 423px;
height: 177px;
border: 1px solid #DAE2ED;
box-shadow: 2px 2px 5px rgba(83,100,122,.35);
background-color: #fff;
overflow: hidden;
display: none;
position: relative;
left: 200px;
}
.close
{
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
display: block;
transform: translate(0%, -50%);
color: #333;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.scc-trade-alert-tips
{
width: 180px;
height: 16px;
display: inline-block;
position: relative;
font-size: 14px;
line-height: 16px;
padding: 5px 5px 5px 25px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
color: #1686CC;
cursor: pointer;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.tips-icon-mail
{
width: 16px;
height: 16px;
position: absolute;
left: 5px;
top: 2px;
width: 16px;
height: 16px;
background: url(images/mail-ta.png) no-repeat 0 -25px;
font-family: 'Roboto', sans-serif;
}
.trade-alert-focus-anchor:focus .subscription-trade-alert-box
{
display: block;
}
<a class="trade-alert-focus-anchor" href="#">
<div class="trade-alert">
<div class="scc-trade-alert-tips">
<i class="tips-icon-mail" ></i>
Subscribe to Trade Alert
</div>
</div>
<div class="subscription-trade-alert-box">
<span class="close">×</span>
Subscribe
</div>
<script>
var closebtns = document.getElementsByClassName("close");
var i;
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
</script>
</a>
How to make this infinite open and close.
I fixed it that it opens multiple times without changing to much:
1st I changed the Box subscription-trade-alert-box to an ID instead of a class.
2nd I fixed the change from Class to ID in CSS
3rd I added an onclick event for the subscription link
4th added a JS line that the subrcription box style dispaly: block is set when clicked.
var closebtns = document.getElementsByClassName("close");
var i;
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
function showBox() {
document.getElementById("subscription-trade-alert-box").style.display = "block";
}
.trade-alert
{
width: 180px;
height: 26px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
color: #333;
}
#subscription-trade-alert-box
{
width: 423px;
height: 177px;
border: 1px solid #DAE2ED;
box-shadow: 2px 2px 5px rgba(83,100,122,.35);
background-color: #fff;
overflow: hidden;
display: none;
position: relative;
left: 200px;
}
.close
{
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
display: block;
transform: translate(0%, -50%);
color: #333;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.scc-trade-alert-tips
{
width: 180px;
height: 16px;
display: inline-block;
position: relative;
font-size: 14px;
line-height: 16px;
padding: 5px 5px 5px 25px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
color: #1686CC;
cursor: pointer;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.tips-icon-mail
{
width: 16px;
height: 16px;
position: absolute;
left: 5px;
top: 2px;
width: 16px;
height: 16px;
background: url(images/mail-ta.png) no-repeat 0 -25px;
font-family: 'Roboto', sans-serif;
}
.trade-alert-focus-anchor:focus #subscription-trade-alert-box
{
display: block;
}
<a class="trade-alert-focus-anchor" href="#">
<div class="trade-alert">
<div class="scc-trade-alert-tips" onclick="showBox()">
<i class="tips-icon-mail" ></i>
Subscribe to Trade Alert
</div>
</div>
<div id="subscription-trade-alert-box">
<span class="close">×</span>
Subscribe
</div>
</a>
Use onclick event in javascript instead of :focus in css.
<div class="trade-alert">
<div class="scc-trade-alert-tips" onclick="document.getElementById('subscription-trade-popup').style = 'display: block;'">
<i class="tips-icon-mail"></i>
Subscribe to Trade Alert
</div>
</div>
<div class="subscription-trade-alert-box" id="subscription-trade-popup">
<span class="close">×</span>
Subscribe
</div>
By setting .style = 'none' at the element level, it overrules the css level rule. Instead, you can remove the css rule and simply add another event listener to toggle the style between block and none.
Also, I'd reccomend using document.querySelector() and document.querySelectorAll(), as they are the modern standard for selecting elements.
.trade-alert
{
width: 180px;
height: 26px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
color: #333;
}
.subscription-trade-alert-box
{
width: 423px;
height: 177px;
border: 1px solid #DAE2ED;
box-shadow: 2px 2px 5px rgba(83,100,122,.35);
background-color: #fff;
overflow: hidden;
display: none;
position: relative;
left: 200px;
}
.close
{
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
display: block;
transform: translate(0%, -50%);
color: #333;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.scc-trade-alert-tips
{
width: 180px;
height: 16px;
display: inline-block;
position: relative;
font-size: 14px;
line-height: 16px;
padding: 5px 5px 5px 25px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
color: #1686CC;
cursor: pointer;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.tips-icon-mail
{
width: 16px;
height: 16px;
position: absolute;
left: 5px;
top: 2px;
width: 16px;
height: 16px;
background: url(images/mail-ta.png) no-repeat 0 -25px;
font-family: 'Roboto', sans-serif;
}
/* remove this
.trade-alert-focus-anchor:focus .subscription-trade-alert-box
{
display: block;
}
*/
<a class="trade-alert-focus-anchor" href="#">
<div class="trade-alert">
<div class="scc-trade-alert-tips">
<i class="tips-icon-mail" ></i>
Subscribe to Trade Alert
</div>
</div>
<div class="subscription-trade-alert-box">
<span class="close">×</span>
Subscribe
</div>
</a>
<script>
document.querySelectorAll('.close').forEach(function(close) {
close.addEventListener('click', function(e) {
e.stopPropagation(); //otherwise the click will bubble and reopen itself
this.parentElement.style.display = 'none';
});
});
document.querySelector('.trade-alert-focus-anchor')
.addEventListener('click', function() {
document.querySelector('.subscription-trade-alert-box')
.style.display = 'block';
});
</script>
JavaScript adds styles as inline css. So if you add a style with JS then also remove it with JS. This line is adding the display: none; as an inline style,
this.parentElement.style.display = 'none';
I made a codepen where I used JS to open and close the popup/modal, by assigning display: block to show and display:none; to hide.
Codepen Link