We Keep Coding

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>

removing and adding classes to modal content elements

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');
});

how to make '.box' responsive and the elemens inside it, like the dropdown buttons, texts, etc.?

I've already made my banner/header responsive, I'd put these dropdown buttons inside a box (I hope its okay?). I'm also new to bootstrap (more like new to everything), just copied codes from demos. I just need to make this certain box responsive together with the others inside it. If the box isn't the right thing, although it's kind of nice, then any suggestions please. Thanks.
HERE'S ALL I'VE GOT:
img.img-responsive {
margin: auto;
}
.masthead {
height: 1000px;
align: center;
background-image: url("../img/lEy8hs2.jpg]");
background-attachment: fixed;
background-repeat: no-repeat;
}
body {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
background-image: url(../img/lEy8hs2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
.box {
font-weight: 700;
box-shadow: inset 2px 2px 10px 10px #FC2B48;
border-radius: 100px;
background-color: #7D00C1;
padding: 50px 100px 50px;
margin: 50px;
margin-left: 200px;
width: 950px;
height: 1800px;
color: ##FFE900;
font-weight: 900;
}
/******************************************************
ROUNDED BUTTONS
******************************************************/
.btn-primary {
background-color: #BC1A45;
color: #FFFD7C;
}
.btn-lg.round {
border-radius: 32px;
}
/******************************************************
RAISED BUTTONS
******************************************************/
.btn-primary.raised {
box-shadow: 0 3px 0 0 #51096D;
}
.btn-primary.raised:active,
.btn-primary.raised.active {
background: #D31B4C;
box-shadow: none;
margin-bottom: -3px;
margin-top: 3px;
}
.box2 {
margin: 100px;
margin-left: 300px;
width: 300px;
height: 100px;
color: #F2F918;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tekkenetic!</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="shortcut icon" href="img/favicon.ico" />
</head>
<body>
<!-- HEADER -->
<div class "img">
<div class="masthead">
<p>
<img src="img/51e5b810a79ab.png" alt="image" class="img-responsive" />
</p>
<div class="box">
<!-- 1st button -->
<div class="btn-group">
<button type="button" class="btn btn-primary btn-lg raised round"><span class="glyphicon glyphicon-home"></span> HOMEPAGE</button>
</div>
<!-- 2ND BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-picture"></span> GALLERY <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Game Screenshots
</li>
<li>Cool Fanarts
</li>
</ul>
</div>
<!-- 3RD BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class=" glyphicon glyphicon-sunglasses"></span> CHARACTERS <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
</ul>
</div>
<!-- 4TH BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-plus"></span> EXTRAS <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Another action
</li>
<li>Another action
</li>
</ul>
</div>
<!-- 5TH BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class=" glyphicon glyphicon-info-sign"></span> ABOUT <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
</ul>
</div </div>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

you are using Bootstrap why don't you take advantage of Bootstrap container and grid System http://getbootstrap.com/css/#grid
<div class="container">
<div class="box col-xs-12 col-md-8"> <!-- just dont give width to .box class in css-->
...
</div>
</div>

You should use the grid system of bootstrap to make the whole page responsive..
For extra small screens - use col-xs
For small screens - use col-sm
For medium screens - use col-md
For large screens - use col-lg

css ul list multiple item alignment

I have a ul element that conatins multiple items in line. I put my list in 300px fixed panel.
<div class="panel panel-primary" style="width:300px">
<div class="panel-heading"> Menu Items</div>
<div class="panel-body">
<ul>
<li>
<div class="content">
<button class="btn btn-sm btn-default">
<span class="glyphicon glyphicon-th" ></span>
</button>
A Long Menu Item Name
<div class="settings">
<div class="show-settings pull-rigth">
<div class="btn-group pull-right">
<button class="btn btn-xs btn-info">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
<button class="btn btn-xs btn-info">
<span class="glyphicon glyphicon-eye-close"></span>
</button>
</div>
</div>
<button class="btn btn-xs btn-default pull-right">
<span class="glyphicon glyphicon-cog"></span>
</button>
</div>
</div>
</li>
</ul>
</div>
And my css settings is here
ul, li {
list-style: none; margin: 0; padding: 0;
}
ul { padding-left: 1em; }
li { padding-left: 0; }
.show-settings{
display: none;
}
.settings:hover .show-settings{
display : block;
}
.content{
position: relative;
padding: .4em .4em .4em 0.2em;
*padding: .4em;
margin: .5em 0;
background: #D9EDF7 ;
color: #444;
text-decoration: none;
border-radius: .3em;
}
Working code is here.
My settings class item is going out of blue content.
My settings button count may be 3 or 4. Is it possible to overflow to the menu item the text like this:
Or flowing new line in content.

Add display:inline to your settings class
.settings{
display:inline;
}
DEMO
UPDATE
You have a typo in writing a class below div.settings. It is as below:
<div class="show-settings pull-rigth">
<!--^^^^^-->
It should have been
<div class="show-settings pull-right">
May be its in fiddle but still a point to note.

I have modified your structure a bit. try the below code, you can even fine tune it.
Html
<div class="panel panel-primary" style="width:300px">
<div class="panel-heading"> Menu Items</div>
<div class="panel-body">
<ul>
<li>
<div class="content">
<button class="btn btn-sm btn-default">
<span class="glyphicon glyphicon-th" ></span>
</button>
<span class="title">A Long Menu Item Name A Long Menu Item Name</span>
<div class="settings">
<button class="btn btn-xs btn-default pull-right">
<span class="glyphicon glyphicon-cog"></span>
</button>
<div class="show-settings pull-rigth">
<button class="btn btn-xs btn-info pull-right">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
<button class="btn btn-xs btn-info pull-right">
<span class="glyphicon glyphicon-eye-close"></span>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
CSS
ul, li {
list-style: none; margin: 0; padding: 0;
}
ul { padding-left: 1em; }
li { padding-left: 0; }
.show-settings{
display: none;
}
.settings{
position: absolute;
top: 8px;
right: 9px;
width: 75px;
}
.settings:hover .show-settings{
display : block;
}
.content{
position: relative;
padding: .4em .4em .4em 0.2em;
*padding: .4em;
margin: .5em 0;
background: #D9EDF7 ;
color: #444;
text-decoration: none;
border-radius: .3em;
position: relative;
}
span.title {
display: inline-block;
width: 70%;
padding-left: 3px;
}
.btn-default{
vertical-align: top;
}

Try using this.
in css -
.settings { display: inline-block; white-space: nowrap; vertical-align: middle; }
.menu-label { display: inline-block; vertical-align: middle; }
in html -
change this
</button>
A Long Menu Item Name
<div class="settings">
to this
</button>
<span class="menu-label">A Long Menu Item Name</span>
<div class="settings">

You can use float:right; margin-top:3px; to the .settings class.

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.