I have fileupload control on my page and I have wrapped it around with fake button.Now I want to change the color of button to black.I tried various way but could not achieve. Here is my button and css:
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<div class="col-xs-4">
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload" style="background-color: black" />
</div>
</div>
Please help.
For it to work, you have to put style="background-color: black" to div.fileUpload instead of input#fileUpload.
Code:
<div class="col-xs-4">
<div class="fileUpload btn btn-primary" style="background-color: black">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
Snippet:
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="col-xs-4">
<div class="fileUpload btn btn-primary" style="background-color: black;border:0;">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload" />
</div>
</div>
bootstrap buttons has gradient background-image: linear-gradient... because for changes bg color u must set background-image: none and add tag name
to get a higher priority than bootstrap styles, than add background-color, sorry for my bad english.
div.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
background-color: black;
background-image: none;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<!-- Свіжа збірка мінімізованих CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Додаткові теми -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<div class="col-xs-4">
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
I can see you are using Bootstrap buttons (btn btn-primary), in order to change the button background color or hover color. You can right click the button then go to inspect element in your browser. Look in the inspector you will realize bootstrap has some classes that style the button as follows:
Overwrite this in your custom css to style the Bootstrap Button Background Colour
.btn-primary {
color: #fff;
background-color: #000;
border-color: #2e6da4;
}
Overwrite this class to style the Bootstrap Hover Button Attributes
.btn:hover, .btn:focus, .btn.focus {
color: #333;
text-decoration: none;
}
Related
! Updated code !
I'm recently trying to learn html/css to code a website. I've been following multiple tutorials but for some reason, my modals aren't working. The buttons to open/close modals aren't working. If anyone could offer any help it would be much appreciated!
Below I've included my html file, stylesheet, and javascript file.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://kit.fontawesome.com/935b67cf83.js" crossorigin="anonymous"></script>
<script src="JS.js"></script> <!-- used to link to javascript-->
<title>yo</title>
</head>
<body>
<section class="flex" id="portfolio">
<h1>
PROJECTS
<!--- <div class="horizontalLine" </div> --->
</h1>
<div class="gallery">
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#trainModal">Open Modal 1</button>
<!--- <a class="btn" id="TrainBtn" href="#">LEARN MORE</a>
--->
</div>
</div>
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#project2Modal">Open Modal 2</button>
<!---
<a class="btn" id="Project2Btn" href="#">LEARN MORE</a> --->
</div>
</div>
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#project3Modal">Open Modal 3</button>
</div>
</div>
</div>
</section>
<!--pop-ups, bg-modal means background-->
<div class="modal" id="trainModal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#trainModal">
×
</button>
<h2> MerseyTrainsLive</h2>
</div>
<div class="modal-body">
<p> idem espum </p>
</div>
</div>
</div>
<div class="modal" id="project2Modal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#project2Modal">
×
</button>
<h2> project 2</h2>
</div>
<div class="modal-body">
<p> idem espum 2 </p>
</div>
</div>
</div>
<div class="modal" id="project3Modal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#project3Modal">
×
</button>
<h2> project 3</h2>
</div>
<div class="modal-body">
<p> idem espum 3 </p>
</div>
</div>
</div>
<div id="overlay"> </div>
</body>
</html>
style.css
body {
}
h1 {
font-size: 40px;
text-align: center;
}
.horizontalLine {
border-top: 5px solid black;
width: 100px;
margin: auto
}
.gallery {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center; /*makes individual boxes centered*/
}
.gallery img {
height: 300px;
width: 300px;
}
.gallery .projectBox {
width: 300px;
position: relative;
display: inline-block;
/*margin: 10px; /*can be used to make the photos spaced out*/
}
.gallery .projectBox img {
width: 100%;
border: 4px solid black;
transition-duration: 0.5s;
opacity: 1;
}
/*when hover over image, the image disappears*/
.gallery .projectBox:hover img {
opacity: 0;
}
.gallery .projectBox .span {
text-align: center;
display: none;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
}
.gallery .projectBox .span p1 {
margin: auto;
font-size: 24px;
line-height: 40px;
padding: 20px;
}
.gallery .projectBox .span p2 {
margin: auto;
font-size: 16px;
line-height: 40px;
}
.gallery .projectBox:hover .span {
opacity: 1;
display: block;
}
.gallery .projectBox .span a {
text-decoration: none;
}
/*modal open buttons*/
.gallery .projectBox .span .modal-open {
display: flex; /*makes layout nice :) */
width: 150px;
padding: 10px; /*how far the lines of button are from text*/
margin: 30px auto;
color: black;
font-size: 20px;
outline: none;
border: 2px solid #f44336;
background: transparent;
cursor: pointer;
}
.gallery .projectBox .span .modal-open:hover {
color: white;
background: #f44336;
}
/* popups */
.modal {
width: 60%;
height: 60%;
position: fixed;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; /*so appears on top of overlay*/
text-align: center;
background-color: white;
display: none;
}
/*modal close close button*/
.modal-close {
background-color: transparent;
border: none;
font-size: 1.5rem;
}
.modal.active {
display: flex;
}
.modal .modal-content {
display: flex;
border-radius: 4px;
position: relative; /*lets the .close position itself according to content*/
}
/*image for top of modal*/
.modal .modal-content img {
height: 100px;
width: 100px;
padding: 20px;
}
.modal .modal-header .modal-close {
position: absolute;
top: 5px;
right: 14px;
font-size: 42px;
cursor: pointer;
border-radius: 4px;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
}
.overlay.active {
display: block;
}
JS.js
const btns = document.querySelectorAll(".modal-open");
const close_btns = document.querySelectorAll(".modal-close");
const overlay = document.getElementById("overlay");
btns.forEach((btn) => {
const target = btn.dataset.target;
btn.addEventListener("click", () => {
document.querySelector(target).classList.add("active");
overlay.classList.add("active");
})
})
close_btns.forEach((btn) => {
btn.addEventListener("click", () => {
document.querySelector(btn.dataset.target).classList.remove("active");
overlay.classList.remove("active");
})
})
window.onclick = (e) => {
if (e.target == overlay) {
const modals = document.querySelectorAll(".modal");
modals.forEach((modal) => modal.classList.remove("active"));
overlay.classList.remove("active");
}
}
Below is a screenshot of the website page
When I hover over the projectBoxes it reveals info on the project, and the button to open more info on the project (displayed in a modal)
First, let's correct the HTML button to trigger modal number 3.
<button class="modal-open" data-target="#project3Modal">Open Modal 3</button>
Notice the change in "data-target" attribute. The value of this attribute should point to the "id" attribute of the respective modal (as per the JS implementation).
Next, for selecting the overlay <div>, let's use document.getElementById method. As there is only one id="overlay" in your HTML, selecting the element with its unique ID is a good practice, in my personal opinion.
So let's change the code in JS as below:
const overlay = document.getElementById("overlay");
btns.forEach((btn) => {
const target = btn.dataset.target; // Declaring target
btn.addEventListener("click", () => {
document.querySelector(target).classList.add("active");
overlay.classList.add("active");
});
});
With the above two changes, everything should work well. If not, please let me know so I can assist you further. If you need clarity for above code, please do let me know. :)
So I am trying to build this website but the button when pressed does not pop up the screen that will ask to fill with name and phone number and was wondering why this is not working. I am a complete noob when it comes to HTML and CSS, still learning most of the ways and needed help any advice and corrections will be greatly appreicated. Also, I am using JSFiddle I do not know if that makes a difference. Thank you in advance.
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* Full-width input fields */
input[type=text], input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: clear;
color: black;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 25px;
}
button:hover {
opacity: 0.8;
background-color: red;
}
/* this is for the box on the top of page */
.boxbar_top{
height:20%;
width: 100%;
position: static; /*assign on top when stroll */
right:0;
overflow:hidden;
background-color: red;
}
/*accessing the button layout */
.boxbar_top a {
float: left;
text-align: left;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* bottom layout of screen */
.boxbar_bttom{
height: 20%;
width: 100%;
position: static; /* assign on top when stroll */
right: 0;
overflow: hidden;
background-color: red;
}
/*accessing the bottom layput */
.box_bar_bttom a{
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* tabs layout */
.tabs{
background-color: inherit;
float: center;
border: 15px solid red;
padding: 14px 16px;
font-size: 17px;
border-radius: 25px;
padding: 20px;
width:200px;
height: 100%;
}
/*style of the tabs inside */
.tabs-button{
margin: 0;
position: absolute;
color: black;
padding: 22px 16px;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
cursor: pointer;
font-size: 20px;
}
.box{
margin: auto;
width: 60%;
padding: 10px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
/*show the text when hover through tab */
.hiddenText{
display: none;
}
.hoverDiv:hover + .hiddenText{
display: block;
color: green;
font-size: 22px;
font-weight: bold;
}
/* cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* the center of first-last-#...etc */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
padding-top: 60px;
}
/*model layput when clicked */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid red;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/*hover on layout */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
<!-- this is the layout of the first page for crete a cake -->
<!-- this is the problem of aligning the iteams on the right spots -->
<!-- problem the buttons are not shown -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="order cake">
<title>Create Cake</title>
</head>
<body>
<div class="boxbar_top">
<a class="active"> </a>
<form>
<select name="dropdown">
<option value="ENGLISH"></option>
<option value="SPANISH"></option>
</select>
</form>
<p class="boxbar_top; align: right;">
<h2 style="color: white; align-items: right;">
Order your cake online
</h2>
</p>
</div>
<div class="box">
<div class="tabs">
<!-- when clicked pop asked for user name and number -->
<div class="imgcontainer">
<span onclick="document.getElementById('info').style.display='none'" class="close" title="Close Modal"> </span>
<button onclick ="container"> ADD ORDER </button>
</div>
<div class="modal">
<div class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<!-- this is the area pops out when the user hits add order -->
<div class="container">
<!-- enter the first name -->
<label for="fname"><b>First Name</b></label>
<input type="text" id="fname" name="fname" placeholder="First Name" required>
<!-- enter the last name -->
<label for="lname"><b>Last Name</b></label>
<input type="text" id="lname" name="lname" placeholder="Last Name" required>
<!-- phone number -->
<label for="phone"><b>Phone Number</b></label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" placeholder="Phone Number" required>
<!-- submit number -->
<button type="submit" value="Submit">Submit</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('info').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
</div>
<div style="tabs-button">
<button onclick="document.getElementById('info').style.display='block'"> CHECK ORDER </button>
</div>
<div style="tabs-button">
<button onclick=" ">DELETE ORDER </button>
</div>
</div>
</div>
<div class="boxbar_top">
<a class="active"> </a>
</div>
</body>
</html>
you have not assigned id to your modal, but have done getElementById('id01')
<div class="modal" id="id01">
and your btn triggering modal should be sthng like this:
<button type="button" id="btn">Add order</button>
and your js:
var btn = document.getElementById("btn");
var modal = document.getElementById("id01");
btn.onclick = function() {
modal.style.display = "block";
}
I wrote a simple input field with a button in it. Code is as given below.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
As you can see, when I click in input field, button disappears. When I click outside that form, it reappears. But I don't want it to disappear when clicked on input field. How can I do that?
Set z-index: 1 on #srch-term element
use z-index while focus
input:focus ~ .btn-primary {
z-index: 100;
}
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
input:focus ~ .btn-primary {
z-index: 100;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
Change the z-index in the .add-on button CSS rule to 3.
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 3;
font-size: 14px;
padding: 5px;
}
Just give a higher value to the z-index of your button. Probably the input highlight that places a div upon it
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 5;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
You should set position: relative to the button
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: relative;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
As others are saying, the input field covers the button when it is focused.
Try to set a permanent z-index on your input and button and make the z-index for button higher than the input's.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
z-index: 1020;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
z-index: 1021;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
Problem goes away if i add z-index: 1 to input and z-index: 3 to button. Can't figure out why but z-index: 2 on button doesen't seem to work.
simply add z-index to input. the value is more than -1 and less than the button z-index
/* Style the search field */
.add-on input {
width: 100%;
border-radius: 0;
z-index: 0
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
Solution 1 - Change z-index: 2 to z-index: 3 in .add-on button, but if your content increase the search button will overlap with content.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 3;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
Solution 2 - Remove position: absolute, top: 2px, right: 3px, z-index: 2 from .add-on button and update height: 33px; to height: 38px; in .add-on button, it'll display search next to input field and it'll not overlap content.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
border-radius: 0;
height: 38px;
width: 60px;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
I have integrated a sign up modal on a bootstrap website and would like to limit the number of impressions to visitors seeing it twice per session instead of on every page and also hiding it once a visitor has subscribed. The modal appears after 5 seconds of opening a web-page and only closes once a user clicks the close button.
//Modal
$(document).ready(function () {
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(5000).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(6000).fadeIn(400);
//Hide dialogue and background when the user clicks the close button
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog() {
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
html {
background-color: #333;
}
h2 {
text-align: center;
}
/****Modal*****/
/*Default Modal Styles*/
/* This is the background overlay */
.backgroundOverlay {
position: fixed;
top: 0;
right: 0,
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .85;
filter: alpha(opacity=85);
-moz-opacity: .85;
z-index: 101;
display: none;
}
/* This is the Popup Window */
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
/* This is the closing button */
#btnClose {
width:100%;
display: block;
text-align: right;
text-decoration: none;
color: #BCBCBC;
}
/* This is the closing button hover state */
#btnClose:hover {
color: #c90c12;
}
/* This is the description headline and paragraph for the form */
#delayedPopup > div.formDescription {
float: left;
display: block;
width: 44%;
padding: 1% 3%;
font-size: 18px;
color: #666;
clear: left;
}
/* This is the styling for the form's headline */
#delayedPopup > div.formDescription h2 {
color: #444444;
font-size: 36px;
line-height: 40px;
}
/*MailChimp Signup Form*/
/* This is the signup form body */
#delayedPopup #mc_embed_signup {
float: left;
width: 47%;
padding: 1%;
display: block;
font-size: 16px;
color: #666;
margin-left: 1%;
}
/* This is the styling for the signup form inputs */
#delayedPopup #mc-embedded-subscribe-form input {
width: 95%;
height: 30px;
font-size: 18px;
padding: 3px;
margin-bottom: 5px;
}
/* This is the styling for the signup form inputs when they are being hovered with the mouse */
#delayedPopup #mc-embedded-subscribe-form input:hover {
border:solid 2px #97c1c0;
box-shadow: 0 1px 3px #AAAAAA;
}
/* This is the styling for the signup form inputs when they are focused */
#delayedPopup #mc-embedded-subscribe-form input:focus {
border:solid 2px #333;
box-shadow: none;
}
/* This is the styling for the signup form submit button */
#delayedPopup #mc-embedded-subscribe {
width: 100%!important;
height: 40px!important;
margin: 10px auto 0 auto;
background: #333;
border: none;
color: #fff;
}
/* This is the styling for the signup form submit button hover state */
#delayedPopup #mc-embedded-subscribe:hover {
background: #97c1c0;
color: #fff;
box-shadow:none!important;
cursor: pointer;
}
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
<html lang="en">
<head>
<title>HOME</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>This a demo page</h2>
<!---Sign Up Modal---->
<div id="bkgOverlay" class="backgroundOverlay" style="display: block;"></div>
<div id="delayedPopup" class="delayedPopupWindow" style="display: block;">
<!-- This is the close button -->
[ X ]
<!-- This is the left side of the popup for the description -->
<div class="formDescription">
<h2>Sign Up and <span style="color: #333; font-weight: bold;">Save!</span></h2>
<p>Sign up today and be the first to know about our SPECIALS!</p>
</div>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<label for="mce-FNAME">First Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address
<span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="PLEASE INPUT THE MAILCHIMP CODE" value="">
</div>
<div class="clear">
<input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
<!-- End MailChimp Signup Form -->
</div> <!---End of Sign Up Modal-->
<!------JS----->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
Use the jquery-cookie plugin by carhartl.
Check for cookie before showing the modal. If it's present, don't display it. If it's not, store a new cookie and display modal.
$(document).ready(function() {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
$('#bkgOverlay').modal('show');
}
});
I´m implementing a FileUpload and have created <div> with bootstrap button class to make it look better.
But since I did this the input is just clickable at a specific position (above 'aufnehmen').
Can someone tell me how to make the Window open when clicking anywhere on the div?
Here is a fiddle that demonstrates my problem.
.btn-lg{
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)"
value="">
</div>
You can use label instead of div to wrap file input.
<label for="cameraImg">
.btn-lg {
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="cameraImg" class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" value="">
</label>
You got a bunch of answers to your problem quickly, but I think it is also important to show you how we found out what the problem is in such a short time, that is, how to debug such problems generally.
If you inspect the element(s) in your developer console and hover over it in the code, you can see the outlines highlighted.
That way, you can see that the input element itself is not as high as the button and that's why any click outside of that area didn't trigger the input's click event.
From that point on, you could have come up with your own solution (setting height: 100% as some answers suggested, or also top: 0; right: 0; bottom: 0; left: 0, etc.).
You can fix this by setting height: 100% on the input:
.btn-lg {
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
border: 1px solid #C00;
height: 100%; /* add this rule */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" value="">
</div>
Set width:100%; height:100%; for input.upload it works... check below snippet
.btn-lg{
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
width:100%;
height:100%;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)"
value="">
</div>
You can add:
.fileUpload input.upload {
width: 100%;
height: 100%;
}