removing and adding classes to modal content elements - javascript

I have 2 modal elements. In both I have this little javascript styling element: https://jsfiddle.net/EricTalv/wjmfe799/10/
By only having one of these on one page it works fine.
The problem comes when I try to add these to my modals:
https://jsfiddle.net/EricTalv/x5qwnv82/1/
So, when I already have a class .active in the DOM the first modal works well, however, the second one doesn't function at all, and after I leave the first modal and come back, the previously selected item seems to stay there which is a nice addition but I feel like this seems to be causing problems as well.
What I want to do is to add an .active class only when one of those items is pressed, and upon leaving the last chosen item should stay.
I tried this fiddle: http://jsfiddle.net/chipChocolate/pb95kv32/
this concept could work but couldn't really get it to work, but also makes it harder to read so a more efficient solution would be great.
HTML:
<!-- The Modal 1-->
<div class="modal" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 11111</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="list-area">
<ul id="list-items-container">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- The Modal 2-->
<div class="modal" id="modal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 22222</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="list-area">
<ul id="list-items-container">
<li class="item active">other1</li>
<li class="item">other2</li>
</ul>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
var header = document.getElementById("list-items-container");
var btns = header.getElementsByClassName("item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
CSS:
body {
padding: 10px;
}
/* the list area */
#list-area {
background-color: #FC600A;
border: 2px solid #000;
display: inline-flex;
width: 50%;
}
#list-items-container {
padding: 0;
width: 100%;
}
#list-items-container li {
list-style: none;
font-size: 35px;
font-family: Corbel;
color: #1489B8;
padding: 0 10px 0 10px;
width: 100%;
transition: all .5s ease;
}
#list-items-container li:nth-child(odd) {
background-color: #F7E0D4;
}
#list-items-container li:hover,
#list-items-container .active {
color: red;
cursor: pointer;
padding-left: 50px;
}

You can not have duplicated ids. So I've changed #list-area to
.list-area and #list-items-container to .list-items-container in html and css code.
JS changes:
//Get all buttons
var btns = document.getElementsByClassName("item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
//for clicked item getting parentNode and all its child
var siblings = this.parentNode.childNodes
//check if children have class "active" and remove it
siblings.forEach(function(element) {
if (element.className && element.className.indexOf('active') !== -1) {
element.classList.remove("active");
}
})
//set 'active' to clicked element
this.className += " active";
});
}
Here is working updated jsfiddle https://jsfiddle.net/tehLj8b5/2/

You are using two "id" attributes with the same value (<ul id="list-items-container"></ul>). In an HTML page you are allowed to use only unique IDs, that is your problem!
var header = [].slice.call(document.querySelectorAll('.list-items-container'));
header.forEach(function(hd) {
var bts = [].slice.call(hd.querySelectorAll('.item'));
bts.forEach(function(bt) {
bt.addEventListener('click', function() {
var current = document.querySelector('.item.active');
current.className = current.className.replace(' active', '');
this.className += ' active';
});
});
});
body {
padding: 10px;
}
/* the list area */
.list-area {
background-color: #FC600A;
border: 2px solid #000;
display: inline-flex;
width: 50%;
}
.list-items-container {
padding: 0;
width: 100%;
}
.list-items-container li {
list-style: none;
font-size: 35px;
font-family: Corbel;
color: #1489B8;
padding: 0 10px 0 10px;
width: 100%;
transition: all .5s ease;
}
.list-items-container li:nth-child(odd) {
background-color: #F7E0D4;
}
.list-items-container li:hover,
.list-items-container .active {
color: red;
cursor: pointer;
padding-left: 50px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
Open modal 1
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2">
Open modal 2
</button>
<!-- The Modal 1-->
<div class="modal" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 11111</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="list-area">
<ul class="list-items-container">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- The Modal 2-->
<div class="modal" id="modal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 22222</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="list-area">
<ul class="list-items-container">
<li class="item active">other1</li>
<li class="item">other2</li>
</ul>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You could swap you JavaScript out for this nifty little bit of jQuery. Here it'll toggle the class of active on whatever li element is clicked and remove it from it's siblings:
$('li').click(function() {
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
});

Related

Why is my modal not displaying as a popup that fades from the top and centred?

I am attempting to make a portfolio image gallery that display's a model with a click that fades in and is positioned to the center.
The Button Does not properly load the modal popup.
I have tried proper linking from bootstrap and jquery files, I have also attempted to check if CSS properties are conflicting, and still, nothing works?
I don't understand if it's where I placed the modal fade or if it has to do with mixing a modal popup with a category filter menu.
I have attempted to search online everywhere but cannot seem to find any other issues with this.
Thank you for your help.
$(document).ready(function () {
$('.list').click(function () {
const value =
$(this).attr('data-filter'); if (value == 'all') { $('itemBox').show('1000'); }
else {
$('.itemBox').not('.' + value).hide('1000');
$('.itemBox').filter('.' + value).show('1000');
}
}) $('.list').click(function () {
$(this).addClass('active').siblings().removeClass('active');
})
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
section {
padding: 20px;
width: 1280px;
margin: 40px auto;
}
section ul {
display: flex;
margin-bottom: 10px;
;
}
section ul li {
list-style: none;
background: #eee;
padding: 8px 20px;
margin: 5px;
letter-spacing: 1px;
cursor: pointer;
}
section ul li.active {
background: #03a9f4;
color: #fff;
}
.product {
display: flex;
flex-wrap: wrap;
}
.product .itemBox {
position: relative;
width: 200px;
height: 300px;
margin: 5px;
}
.product .itemBox img {}
#position {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section>
<ul>
<li class="list active" data-filter="all">All</li>
<li class="list" data-filter="mobile">Mobile</li>
<li class="list" data-filter="camera">Camera</li>
<li class="list" data-filter="watch">Watch</li>
<li class="list" data-filter="shoe">Shoe</li>
<li class="list" data-filter="headphone">Headphone</li>
</ul>
<div class="product">
<div class="card">
<div class="card-body">
<div class="itemBox mobile"><img src="img/colorgame.jpg" />
<h5 class="card-title">Card Title</h5>
<p class="card-text">Quick TExt Example</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="img/colorgame.jpg" />
<p>Example Paragraph text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="itemBox camera"><img src="img/colorgame.jpg"></div>
<div class="itemBox watch"><img src="img/colorgame.jpg"></div>
<div class="itemBox shoe"><img src="img/colorgame.jpg"></div>
<div class="itemBox headphone"><img src="img/colorgame.jpg"></div>
</div>
</section>

Float button right in modal header next to close button

I have a modal and wanted to add some details and buttons in the header. I have a title and close button. I also want to add another button to the left of the close button. The button keeps floating left even though I have a float-right set up.
My Code:
<div class="modal-header">
<h5 class="modal-title"></h5>
<div class="float-right">
<a id='modal_csv'><i class="fas fa-camera"></i></a>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
My output:
How do I float the
<div class="float-right">
<a id='modal_csv'><i class="fas fa-camera"></i></a>
</div>
to the right next to the close button. What am I doing wrong?
I think this is the layout is as you wanted...
I believe you wanted to use pull-right
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="modal-header">
<h5 class="modal-title pull-left">Title</h5>
<div class="pull-right">
<a id='modal_csv'><i class="fas fa-camera"></i></a>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
Here is a working example, I have not changed any html, maybe your css is wrong or I'm not understanding.
html {
font-family: Arial, Helvetica, sans-serif;
}
.modal-title {
display: inline-block;
}
.modal-header {
width: 300px;
height: 60px;
background: #e6e6e6;
border-radius: 5px;
padding: 5px;
}
h5 {
font-size: 26px;
margin: 14px 0;
}
.float-right,
.close {
float: right;
margin: 20px 4px;
}
i {
font-size: 22px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="modal-header">
<h5 class="modal-title">Mobile</h5>
<div class="float-right">
<a id='modal_csv'><i class="fas fa-camera-retro"></i></a>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

Cannot Bring Modal to Front

I have a problem where the Modal Bootstrap doesn't go to the front of the modal backdrop. As shown in the Code snippet, when the user presses "Deploy", the modal pops up. In my version, the modal is in the "back" where I cannot interact with the Send and Cancel buttons. I looked meticulously and it is because of a "min.css" file in my project. How can I override it such that I am able to interact with the buttons in the modal? I tried z-index but that didn't work.
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal-content {
background: linear-gradient(-45deg, #89f7fe 0%, #66a6ff 60%, #23A6D5, #23D5AB);
margin:auto;
padding: 20px;
border: 1px solid #888;
width: 500px;
height: 500px;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.modal{
display: none;
position:absolute;
z-index: 10000;
padding-top: 100px;
left: 0px;
top: 0px;
width: 100%;
max-height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal2-content {
background: white;
margin:auto;
width: 500px;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"/>
<!-- <link href="css/sb-admin-2.min.css" rel="stylesheet"> -->
<link href="css/couponsexample.css" rel="stylesheet" />
</head>
<body id="page-top">
<div id="wrapper">
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<div class="container-fluid">
<div class="card shadow mb-4">
<div class="card-header py-3">
<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
<button class="buttonTest" id="myBtn">New Discount</button>
</span>
</div>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal2-content">
<div style="background-color:#1E90FF" class="modal-header">
<font color="white">
<h4 class="modal-title" id="myModalLabel">Confirm Deployment</h4>
</font>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Please confirm that the deployed coupon is accurate and ready. Once deployed, you cannot retake the coupon until it expires. Canceling will cause problems Test Test Tes</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
<div class="card-body">
<div id="myModal" class="modal">
<div class="modal-content" >
<form id="msform">
<span class="close">×</span>
<fieldset>
<h3 class="fs-subtitle">Step 4</h3>
</fieldset>
</form>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="col s12 m6">
<div class="card">
<span>
Deploy
</span>
<div class="card-content">
<span class="card-title blue-text text-darken-2" style="white-space: nowrap">$5.00 Discount</span>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"/>
<script src="couponsjs.js"/>
</body>
</html>

bootstrap modal disappears when mouse off browser window, doesn't return

I made a quick CodePen to highlight the issue.
https://codepen.io/robbullock/pen/NwWqYE
1) Hover over the card
2) Click "Request Access" button
3) Mouse off the screen and the modal disappears and doesn't come back.
I believe the issue that's causing the problem is with the ".content .content-overlay" classes below, along with the corresponding hover effects.
.content .content-overlay {
background: rgba(51, 51, 51, 0.9);
position: absolute;
height: 270px;
width: 270px;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
border-radius:8px;
}
.content:hover .content-overlay {
opacity: 1;
}
.content:hover .content-details {
top: 50%;
left: 50%;
opacity: 1;
}
Is there any way to prevent this type of behavior?
That is because you have left the .content-overlay element unclosed and so it wrap the modal element as well. So when you mouse out of the page, the :hover rules do not apply and the modal goes away as its container is hidden.
See https://codepen.io/anon/pen/mqdedj
move the modal out of the < li > tag
<li class="col-md-4 content allAvail">
<div class="card">
<div class="card-block">
<p class="card-title-none">Title</p>
<p class="card-type">text</p>
</div>
</div>
<div class="content-overlay">
<div class="card-content content-details-noaccess fadeIn">
<div class="about">About</div>
<div class="description">text and some stuff</div>
<button type="button" class="button primary-request" data-toggle="modal" data-target="#myModal">Request Access</button>
<a href="/">
<button class="button secondary-btn-noaccess">View Details</button>
</a>
</div>
<!-- CC MODAL ACCESS -->
</div>
</li>
<!-- END MODAL -->
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

bootstrap modal overflow issue

I have a Bootstrap modal with a button. When I click the button it shows a right under the button. The contains a ul list with anchor links in it.
The problem is that if I don't set the height to a higher value then that inside the modal the last items is not visislbe because the div is outside the modal.
I don't want to use overflow because i don't want it to scroll. The inside the modal is a dropdown menu which i made my self.
The CSS for the :
.wrapper-for-dropdown {
width: 300px;
z-index:9999;
color: #333;
background-color: #fff;
position: absolute;
display: none;
border: solid;
border-width: 1px;
border-radius: 4px;
border-color: #ccc;
z-index:32432423432;
overflow-wrap:normal;
}
.wrapper-for-dropdown:hover {
border: solid;
border-width: 1px;
border-color: #ccc;
}
.dropdown-ul {
list-style-type: none;
-moz-st color: white;
text-align: left;
padding-left: 10px;
overflow-y: visible;
}
.dropdown-ul li {
float: left;
display: inline-block;
height: auto;
width: 250px;
}
.dropdown-ul li:hover {
}
.dropdown-ul li a {
color: #38546d;
display: block;
float: left;
}
.dropdown-ul li a:hover {
color: black;
display: block;
float: left;
}
HTML:
<!-- Modal -->
<div class="modal" id="modalCreateNewManualResync" tabindex="-1" role="dialog" aria-labelledby="modalCreateNewManualResyncLabel" aria-hidden="true">
<div class="modal-dialog" id="createNewSyncDialog">
<div class="modal-content" style="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalCreateNewManualResyncLabel">Create New Resync
</h4>
</div>
<!-- Model Body -->
<div class="modal-body" >
<div class="container-fluid">
<div class="modal-content-div">
<label>Company:</label>
<label>Sync Reason:</label>
</div>
<div class="modal-content-div-data">
<button class="btn btn-default" id="buttonCompaniesList" onclick="listCompaniesToogle();" type="button" style="display: inline-block; width: 180px;">Select Company<span id="spanArrowIndicator" style="margin-left: 10px; margin-right: 10px;" class="caret"></span></button>
<div id="wraptest" class="wrapper-for-dropdown">
<ul id="ulcompanies" class="dropdown-ul">
</ul>
</div>
<input type="text" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close<span style="margin-left: 10px;" class="glyphicon glyphicon-remove"></span></button>
<button type="button" class="btn btn-default">Create<span style="margin-left: 10px;" class="glyphicon glyphicon-ok"></span></button>
</div>
</div>
</div>
<!--End Of Modal Body -->
</div>
</div>
![Current example of the GUI. Italy and International is not clickable.][1]
[1]Italy and International is not clickable: http://i.stack.imgur.com/uVcLj.jpg
Adding
.modal {overflow: visible}
Solved the issue. Do not add anything else to .model-body.
Also removing some other style on my own div solved the issue. Setting the height to auto as well.
Thanks.

Categories