Select with popup

Developer
Robic
Size
5,674 Kb
Views
4,048
  1. Select with popup Previews
  2. Select with popup HTML Codes
  3. Select with popup CSS Codes
  4. Select with popup JS Codes

How do I make an select with popup?

What is a select with popup? How do you make a select with popup? This script and codes were developed by Robic on 08 December 2022, Thursday.

Select with popup Previews
IQ Test

Select with popup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Select with popup</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="province select"> <div class="select-list"> <span data-value="all" class="option selected">Make your choice</span> <span data-value="1" class="option">1</span> <span data-value="2" class="option">2</span> <span data-value="3" class="option">3</span> </div>
</div>
<section class="popup opacity-hide-right"> <section class="form-popup"> <div data-type="1" class="popup-type box-shadow bg-white"> <span class="close">Fermer <span class="icon-cross">x</span></span> <h1>Popup</h1> <div class="select"> <div class="select-list"> <span data-value="all" class="option selected">All</span>	<span data-value="1" class="option">1</span>	<span data-value="2" class="option">2</span>	<span data-value="3" class="option">3</span> </div> </div> <div id ="" class="select"> <div class="select-list">	<span data-value="all" class="option selected">All</span>	<span data-value="1" class="option">1</span>	<span data-value="2" class="option">2</span>	<span data-value="3" class="option">3</span> </div> </div> <input type="text" name="firstname" placeholder="My firstname"> <input type="text" name="lastname" placeholder="My lastname"> <input type="email" name="email" placeholder="My mail"> <input class="btn-primary-red" type="submit" name="" value="Envoyer"> </div>	<div data-type="2" class="popup-type box-shadow bg-white"> <span class="close">Fermer <span class="icon-cross">x</span></span> <h1>Popup</h1> <div class="select"> <div class="select-list"> <span data-value="all" class="option selected">All</span>	<span data-value="1" class="option">1</span>	<span data-value="2" class="option">2</span>	<span data-value="3" class="option">3</span> </div> </div> <div id ="" class="select"> <div class="select-list">	<span data-value="all" class="option selected">All</span>	<span data-value="1" class="option">1</span>	<span data-value="2" class="option">2</span>	<span data-value="3" class="option">3</span> </div> </div> <input type="text" name="firstname" placeholder="My firstname"> <input type="text" name="lastname" placeholder="My lastname"> <input type="email" name="email" placeholder="My mail"> <input class="btn-primary-red" type="submit" name="" value="Envoyer"> </div>	<div data-type="3" class="popup-type box-shadow bg-white"> <span class="close">Fermer <span class="icon-cross">x</span></span> <h1>Popup</h1> <div class="select"> <div class="select-list"> <span data-value="all" class="option selected">All</span>	<span data-value="1" class="option">1</span>	<span data-value="2" class="option">2</span>	<span data-value="3" class="option">3</span> </div> </div> <div id ="" class="select"> <div class="select-list">	<span data-value="all" class="option selected">All</span>	<span data-value="1" class="option">1</span>	<span data-value="2" class="option">2</span>	<span data-value="3" class="option">3</span> </div> </div> <input type="text" name="firstname" placeholder="My firstname"> <input type="text" name="lastname" placeholder="My lastname"> <input type="email" name="email" placeholder="My mail"> <input class="btn-primary-red" type="submit" name="" value="Envoyer"> </div> </section>
</section> <script src="js/index.js"></script>
</body>
</html>

Select with popup - Script Codes CSS Codes

.hidden { -webkit-transform: scale(0) !important; transform: scale(0) !important; padding: 0 !important; margin: 0 !important; width: 0 !important; height: 0 !important; border: 0px solid transparent !important; text-indent: -9999px !important; opacity: 0 !important; overflow: hidden !important; font-size: 0 !important; position: absolute !important; line-height: 0 !important; pointer-events: none !important;
}
.popup { margin: 0 !important; position: fixed; z-index: 100; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(128, 128, 128, 0.8); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.popup .popup-type { width: 600px; height: auto; padding: 50px; position: relative; background: grey;
}
.popup .popup-type.hidden { position: absolute; opacity: 0; pointer-events: none;
}
.popup input[type=text], .popup input[type=email] { display: block; width: 100%; background: lightgrey !important; color: darkgrey; font-size: 14px; text-align: left !important; padding: 10px 20px; margin-top: 25px; min-height: 40px;
}
.popup .uk-button { margin: 0 auto; display: block; text-align: center; margin-top: 50px; border: 1px solid pink !important;
}
.popup h1 { text-transform: none !important; clear: both;
}
.select { overflow: hidden; -webkit-transition: height .3s ease; transition: height .3s ease; max-width: 300px; margin: 0 auto; cursor: pointer;
}
.select .select-list { opacity: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.select .option { margin-bottom: 0; padding: 10px; -webkit-transform: translateY(-5px); transform: translateY(-5px); opacity: 0; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-transition: all .3s ease; transition: all .3s ease; min-height: 40px;
}
.select .selected { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;
}
.select .selected:after { margin: 0; content: ''; display: inline-block; background: transparent; margin-left: 10px; border-radius: 5px; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: grey transparent transparent transparent;
}
.select.open .option { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1;
}
.select { border: 1px solid grey; margin-top: 50px;
}
.select .option { color: grey; text-align: left !important;
}
.select .selected { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.form-popup .select { border: 1px solid transparent; background: lightgrey; margin-top: 25px; max-width: 500px;
}
.form-popup .select .option { color: darkgrey; text-align: left !important; padding: 10px 20px;
}
.form-popup .select .selected { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.form-popup .select .selected:after { width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: darkgrey transparent transparent transparent;
}
.close { cursor: pointer; float: right; margin-bottom: 20px;
}
.close ~ .select { clear: both;
}
.box-shadow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); padding: 25px;
}
@media screen and (min-width: 1024px) { .box-shadow { padding: 50px; }
}
.opacity-hide, .opacity-hide-top, .opacity-hide-bottom, .opacity-hide-right, .opacity-hide-left { opacity: 0; pointer-events: none; -webkit-transition: all .3s ease; transition: all .3s ease;
}
.opacity-hide-top { -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all .3s ease; transition: all .3s ease;
}
.opacity-hide-bottom { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all .3s ease; transition: all .3s ease;
}
.opacity-hide-right { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all .3s ease; transition: all .3s ease;
}
.opacity-hide-left { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all .3s ease; transition: all .3s ease;
}
.opacity-show, .opacity-show-top, .opacity-show-bottom, .opacity-show-right, .opacity-show-left { opacity: 1; pointer-events: auto; -webkit-transition: all .3s ease; transition: all .3s ease;
}
.opacity-show-top, .opacity-show-bottom { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .3s ease; transition: all .3s ease;
}
.opacity-show-right, .opacity-show-left { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all .3s ease; transition: all .3s ease;
}

Select with popup - Script Codes JS Codes

var $body = document.querySelector('body');
dropdownSelect('select', function(value) { displayContainer(value) $getProvince = document.querySelectorAll('.select'); $getProvince.forEach(function(prov){ var isProvince = prov.classList.contains('province') if (isProvince == true) { getSelectValue(value) } })
})
function displayContainer(value) { document.querySelectorAll('[data-tag]').forEach(function($tag) { var shouldBeVisible = $tag.dataset.tag === value || value === 'all' if (!shouldBeVisible) add($tag, 'hidden') else remove($tag, 'hidden') })
}
function dropdownSelect(id, valueChangeCB) { // on selectionne le select (par ID) var $select = document.querySelectorAll('.'+id); if (!$select) return; $select.forEach(function(mySelect){ var $myOptions = mySelect.querySelectorAll('.option') // on prend la value initiale mySelect.style.height = outerHeight(mySelect.querySelector('.selected')) + "px" var value = mySelect.querySelector('.selected').dataset.value // on lance le callback onChange(value) // deux variable de configuration var classOpen = 'open' var classSelected = 'selected' // au click sur le select mySelect.addEventListener('click', function(e) { // on regarde si il est "open" var isOpen = mySelect.classList.contains(classOpen) // si il ne l'est pas, on l'ouvre if (!isOpen){ mySelect.classList.add(classOpen) mySelect.style.height = $myOptions.length * outerHeight(mySelect.querySelector('.selected')) + "px" } // sinon else { mySelect.style.height = outerHeight(mySelect.querySelector('.selected')) + "px" // on prend l'element cliquer var $clicked = e.target // pour chaque options mySelect.querySelectorAll('.option').forEach(function($option) { // on le deselectionne $option.classList.remove(classSelected) }) // on selectionne l'élément cliquer $clicked.classList.add(classSelected) // on recupère la nouvelle value var newValue = $clicked.dataset.value // si la nouvelle value est différente de l'ancienne if (value !== newValue) { // on attribue la nouvelle value à la value du select value = newValue // on execute le callback onChange(value) } // on ferme le select mySelect.classList.remove(classOpen) } })
})
function onChange(value) { if (valueChangeCB && typeof valueChangeCB === 'function') valueChangeCB(value) }
}
function outerHeight(el) { if(!el) return; var height = el.offsetHeight; var style = getComputedStyle(el); height += parseInt(style.marginTop) + parseInt(style.marginBottom); return height;
}
function outerWidth(el) { if(!el) return; var width = el.offsetWidth; var style = getComputedStyle(el); width += parseInt(style.marginTop) + parseInt(style.marginBottom); return width;
}
function getSelectValue(value){ $myElement = document.querySelector('.province.select') $myData = $myElement.querySelector('.selected').dataset.value $popupSection = document.querySelector('.popup'); document.querySelectorAll('[data-type]').forEach(function($type) { var shouldBeVisible = $myData === $type.dataset.type; if (!shouldBeVisible) { add($type, 'hidden') } else { remove($type,'hidden'); remove($popupSection, 'opacity-hide-right'); add($popupSection, 'opacity-show-right'); add($body, 'overflow')} ; })
}
function remove(selector, className){ selector.classList.remove(className)
}
function add(selector, className){ selector.classList.add(className)
}
function closeClick(){ $popupSection = document.querySelector('.popup'); $close = $popupSection.querySelectorAll('.close'); $close.forEach(function(close){ $popupWindow = close.parentNode; close.addEventListener('click', function(){ remove($body, 'overflow'); remove($popupSection, 'opacity-show-right');add($popupSection, 'opacity-hide-right'); add($popupWindow, 'hidden'); }) })
}closeClick()
Select with popup - Script Codes
Select with popup - Script Codes
Home Page Home
Developer Robic
Username AudreyRBC
Uploaded December 08, 2022
Rating 3
Size 5,674 Kb
Views 4,048
Do you need developer help for Select with popup?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robic (AudreyRBC) Script Codes
Name
A Pen by Robic
Multifiltre
Tickets counter
Ajax utick
Multi-range Jquery
Geoloc Realtime
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!