We Keep Coding

Doing a very simple fade in and fade out on a modal

I normally use Bootstrap for modals but I had to use code for ADA compliance.
I'm trying to create a simple fade-in and fade-out on a modal.
So, if I click on a button, I can fade into the modal and fade out when closing.
Below is my scss
.dialog-backdrop {
display: none;
position: fixed;
overflow-y: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#media screen and (min-width: 640px) {
.dialog-backdrop {
/*background: rgba(0, 0, 0, 0.3);*/
background: rgba(0, 14, 51, 0.8);
}
}
.dialog-backdrop.active {
display: block;
}
.no-scroll {
overflow-y: auto !important;
}
/* this is added to the body when a dialog is open */
.has-dialog {
overflow: hidden;
}
.modal {
position: absolute;
z-index: 1000;
width: calc(100% - 30px);
max-width: 1112px;
height: 789px;
max-height: 789px;
left: 50%;
transform: translate(-50%,0);
top: 100px;
background: #f6f6f6;
box-sizing: border-box;
padding: 15px;
&.hidden{
display: none;
}
*::-webkit-scrollbar {
display: initial;
}
js code
window.openDialog = function (dialogId, focusAfterClosed, focusFirst) {
var dialog = new aria.Dialog(dialogId, focusAfterClosed, focusFirst);
};
window.closeDialog = function (closeButton) {
var topDialog = aria.getCurrentDialog();
if (topDialog.dialogNode.contains(closeButton)) {
topDialog.close();
}
}; // end closeDialog
and html
<div id="dialog_layer" class="dialogs">
<div class="dialog-backdrop zmax">
<div tabindex="0"></div>
<div id="dialog1" role="dialog" aria-modal="true" aria-label="Partner Search" class="hidden modal">
<img src="img/modal/close-icon.svg" class="closeModal" alt="Close" onclick="closeDialog(this)" />
<div class="modalContent">
<form autocomplete="off" action="">
<div id="search" class="autocomplete search">
<img src="img/modal/magnifier.svg" alt="Search" />
<input id="myInput" type="text" placeholder="Search our participating banks or corporations" />
</div>
</form>
<div class="resultsContent">
<div id="bankRegions" class="bankRegions">
<ul>
<li id="All">All (416)</li>
<li id="North America">North America (12)</li>
<li id="Latin America">Latin America (50)</li>
</ul>
</div>
<div id="modalResults" class="modalResults">
<div class="copyList">Copy List</div>
<div id="resultsList" class="resultsList">
<ul id="banks">
</ul>
</div>
</div>
</div>
</div>
<div class="ribbonModal">
<span class="ribbonModalText">
More partners are being added around the world.
</span>
<span class="ribbonJoinThem">
Join Them <img src="img/modal/arrow.svg" class="ribbonArrow" alt="Join Them" />
</span>
</div>
</div>
</div>
</div>
If anyone can help. I know this may be easy, but I'm on a deadline with this and other items.
Thanks.

You can use jQuery, it has a .hide() method which would be useful to you!

Grid doesn't change div positions [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
So I've been trying to make a grid for the past 30 minutes and I can't seem to get it to work. I've tried the piece of code on a sandbox and it worked there. I don't understand why it wont work on my page. What happens is all the divs get placed under each other and I want them to be next to each other instead.
What happens:
div1
div2
div3
What I want to happen:
div1 div2 div3
<div class="jar-lists-wrapper slide-in">
#foreach($folders as $folder)
<div class="jar-lists hidden" data-name="{{$folder}}">
<div class="jar-list box" data-name="{{$folder}}">
<div class="box-header with-border">
<h1 class="box-title">{{$folder}}</h1>
</div>
<div class="box-body">
<div class="jar-children">
#foreach($jars as $jar)
#if(strpos($jar, strtolower($folder)) !== false)
<div>
<h3 class="jar-title">Version:
{{str_replace(array(strtolower($folder) . '-', '.jar'), '', $jar)}}
</h3>
<form action="{{ route('server.settings.jar.switch', $server->uuidShort) }}" method="POST">
#if(str_replace('.jar', '', $jar) == $currentJar)
<br><button class="btn btn-success" type="submit">Installed</button>
#else
<br><button class="btn btn-primary" type="submit">Install</button>
#endif
</form>
<br>
</div>
#endif
#endforeach
</div>
</div>
<div class="box-footer">
View More<i class="fa fa-caret-down"></i>
</div>
</div>
</div>
#endforeach
</div>
And this is my css:
.main {
width: 90%;
max-width: 1300px;
margin: 0 auto;
padding: 2em
}
.jar-lists-wrapper {
position: relative;
display: block
}
.jar-lists {
position: relative;
margin-bottom: 60px;
margin-top: 30px;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 32.5%);
justify-content: space-between;
z-index: 1
}
.jar-lists.hidden {
display: none
}
.jar-list {
text-align: center;
}
.jar-title {
font-size: 16px;
color: #5e5e5e
}
.jars-more {
display: block;
width: 100%;
text-decoration: none;
text-align: center
}
.jars-more {
padding: 10px 0;
font-size: 18px;
color: gray;
cursor: pointer
}
.jars-more i {
margin-left: 10px
}
#media screen and (max-width:1250px) {
.jar-lists {
grid-template-columns: repeat(2, 47%)
}
.jar-list {
margin-bottom: 30px
}
}
#media screen and (max-width:900px) {
.jar-lists {
grid-template-columns: repeat(1, 100%)
}
}

div are block level element so they appears horizontally. So use display:inline-block and width
.child {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div>
You can also use flex
.parent {
display: flex;
flex-direction: row;
}
.child {
border: 2px solid green;
width: 150px;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div>
You can also use grid
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.child {
border: 1px solid red;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div

Try specifying gird-template-spacing from 32.5% to 1fr.

CSS image inside button on the same line as header text in popup window

I've got a popup window (called modal in bootstrap) where in the header there is a text and the image inside the button. I want to move this image button to the right to look like this https://monosnap.com/file/0tktkDw6m2Y1QJOi5IBinoWRgps4gR instead of https://monosnap.com/file/Un7Sl3WpVGNJgc4qclfQW9aA3PEdoa
I was trying to figured out based on this topic How to have two items on opposite sides on the same line but it won't worked. Code is below
.modal-content-square-border {
border-radius: 0;
}
.modal-content {
position: relative;
}
.modal-destroy-bank-employee__header {
display: flex;
margin: 2rem 4.8rem;
padding-bottom: 2rem;
}
.modal-destroy-bank-employee__body {
margin: 2.4rem 4.8rem 5.1rem;
padding: 0;
}
.modal-destroy-bank-employee__body__text-primary {
color: #333;
font-size: 1.6rem;
letter-spacing: .5px;
line-height: 20px;
margin-bottom: 3.2rem;
text-align: left;
}
.bank-employee__button-wrapper {
display: flex;
justify-content: center;
}
<div class="modal-destroy-bank-employee__header">
<h4 class="modal-destroy-bank-employee__header-text text__blue">
Möchten Sie das Nutzerkonto von Herrn l;fgkjs; löschen?
</h4>
<button type="button" class="close modal-preparation__close">
<img alt="Close icon" class="modal-close-button" src="/assets/icon_close-ff7e8f2fd84d4bb1ad3833c3a74810b0676958b9b10f42333ea1a091f8d6a712.svg">
</button>
</div>
<div class="modal-body modal-destroy-bank-employee__body">
<p class="modal-destroy-bank-employee__body__text-primary">
Die Mitarbeiterdaten werden unwiderruflich gelöscht
</p>
<div class="bank-employee__button-wrapper text-center">
<button class="bank-employee__button bank-employee__button-delete bank-employee__button--modal">
Nutzerkonto löschen
</button>
<button class="bank-employee__button submit-btn bank-employee__button--modal">
Abbrechen
</button>
</div>
</div>

Add margin-left auto on close modal-preparation__close
.close.modal-preparation__close{
margin-left:auto;
}

You have wrapped the button with a flex container. So you just need to apply the style margin-left:auto to .close button
.modal-content-square-border {
border-radius: 0;
}
.modal-content {
position: relative;
}
.modal-destroy-bank-employee__header {
display: flex;
margin: 2rem 4.8rem;
padding-bottom: 2rem;
}
.modal-destroy-bank-employee__body {
margin: 2.4rem 4.8rem 5.1rem;
padding: 0;
}
.modal-destroy-bank-employee__body__text-primary {
color: #333;
font-size: 1.6rem;
letter-spacing: .5px;
line-height: 20px;
margin-bottom: 3.2rem;
text-align: left;
}
.bank-employee__button-wrapper {
display: flex;
justify-content: center;
}
.close.modal-preparation__close {
margin-left: auto;
}
<div class="modal-destroy-bank-employee__header">
<h4 class="modal-destroy-bank-employee__header-text text__blue">
Möchten Sie das Nutzerkonto von Herrn l;fgkjs; löschen?
</h4>
<button type="button" class="close modal-preparation__close">
<img alt="Close icon" class="modal-close-button" src="/assets/icon_close-ff7e8f2fd84d4bb1ad3833c3a74810b0676958b9b10f42333ea1a091f8d6a712.svg">
</button>
</div>
<div class="modal-body modal-destroy-bank-employee__body">
<p class="modal-destroy-bank-employee__body__text-primary">
Die Mitarbeiterdaten werden unwiderruflich gelöscht
</p>
<div class="bank-employee__button-wrapper text-center">
<button class="bank-employee__button bank-employee__button-delete bank-
employee__button--modal">
Nutzerkonto löschen
</button>
<button class="bank-employee__button submit-btn bank-employee__button--modal">
Abbrechen
</button>
</div>
</div>

CSS Grid two rows nested in a single column

I am looking for a way to allow two rows within a single column while the other two columns to the right of it are equal/flexible to the height of those two rows. The width should be 100% when looking at all three columns (so around 33% each column). Here is an example of how I want it to look:
https://i.imgur.com/lLPzXhS.png
I will be filling those boxes with clickable boxes like shown below:
https://i.imgur.com/uyyDbL7.png
I have tried using display: row, display: cell, but I am not able to add any margins to it so this is the product I get:
https://i.imgur.com/Ok6EgT0.png
You can see that I have somewhat of the grid system set up, but not as ideally as I want it. There are no margins that can be set between the red and orange box, even though I am able to add margins to the turqoise and blue box.
Here is the code I have:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
Any thoughts on how to replicate the second image results neatly?

You could use flexbox. Take a look at this simplified example:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
You could also use a minimal flexbox-based grid library like Flexbox Grid.

Margin is used for setting where elements should start so instead use padding between those 2 elements to get the space you want.

JavaScript adding classes on multiple modals

I'm kind of desperate. I'm trying to make the same modal as Behance has when you click on one of the little windows but I can't get my JavaScript to work. I'm not able to show "test2".
function modalActive(){
document.getElementsByClassName("window")[0].classList.add("modalActive")
};
function closeModal(){
document.getElementsByClassName("window")[0].classList.remove("modalActive")
};
.gallery-item {
width: 120px;
height: 120px;
border: 3px solid gray;
float: left;
margin-left: 10px;
}
.window {
display: none;
height: 500px;
width: 500px;
Background-color: gray;
z-index: 100000;
position: absolute;
margin: 0 auto;
}
.modalActive {
display: block !important;
}
<div class="gallery-item">
<button class="button" onclick="modalActive()">derp</button>
</div>
<div class="window">
<button class="close" onclick="closeModal()">×</button>
test1
</div>
<div class="gallery-item">
<button class="button" onclick="modalActive()">derp</button>
</div>
<div class="window">
<button class="close">×</button>
test2 - im not able to see this due to some error in my code/knowledge
</div>

You have to target a specific modal to open when clicking on the buttons. At the moment you are only ever finding the first modal and setting the modalActive class.
I have updated your code below to pass the modal id number when clicking on a button.
function modalActive(id){
document.getElementsByClassName("window-" + id)[0].classList.add("modalActive")
};
function closeModal(){
document.getElementsByClassName("modalActive")[0].classList.remove("modalActive")
};
.gallery-item {
width: 120px;
height: 120px;
border: 3px solid gray;
float: left;
margin-left: 10px;
}
.window {
display: none;
height: 500px;
width: 500px;
Background-color: gray;
z-index: 100000;
position: absolute;
margin: 0 auto;
}
.modalActive {
display: block !important;
}
<div class="gallery-item">
<button class="button" onclick="modalActive(1)">derp</button>
</div>
<div class="window window-1">
<button class="close" onclick="closeModal()">×</button>
test1
</div>
<div class="gallery-item">
<button class="button" onclick="modalActive(2)">derp</button>
</div>
<div class="window window-2">
<button class="close" onclick="closeModal()">×</button>
test2 - im not able to see this due to some error in my code/knowledge
</div>