I am making a login modal and want the content to be centered horizontally and vertically. My CSS has it centered how I want it, but when I added the JavaScript, it is only centered horizontally. What's wrong with my code? thanks!
I tried flexbox and every other centering method I know. It just doesnt make sense because if I comment out the JavaScript, the modal content is where I want it to be!
// Get the modal
var modal = document.getElementById('login-modal');
// Get the button that opens the modal
var btn = document.getElementById("login");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";}
}
#login-modal{
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
position:absolute;
top:0;
left:0;
display:flex;
justify-content: center;
align-items: center;
text-align:center;
}
.login-content{
border: 10 px solid black;
height:12%;
width:20%;
background-color:white;
display:block;
text-align:center;
}
input[type=text], input[type=password]{
display:block;
margin: 0 auto;
}
When you want to initially hide something without regard to its display type in CSS, you can create the element with an inline display attribute of style="display: none;" in its HTML tag or, if creating the element in JavaScript, with element.style.display="none".
After that, you can display an element by deleting its element.style.display property. The element reverts to whatever display type was given to it in CSS.
To hide it, add back element.style.display="none";
Using this approach, the modal should always appear as styled in CSS. However, don't try to change its display type to anything except none anywhere else in JavaSript!
To specifically answer the question, inline style attribute values have absolute priority over rules provided in CSS.
Related
I need to remove video element, Canvas and a button on canvas before displaying an alert window and once user presses ok button on the alert window, I need to display some other elements. Currently I am facing below issues.
alert window is getting displayed before deleting the button. So we
just used setTimeout to delete all the elements before displaying
alert window to fix this.
The UI code which should be executed after user presses 'ok' button
is getting executed after alert window display with out stopping for
user click. I thought that the code next to alert() should not be
executed until user presses Ok on alert window.
Below is Javascript code.
$("#remoteVideo").remove();
$("#localCanvas").remove();
$(".terminate_session_btn").remove();
// USED setTimeout TO DELAY THE DISPLAY OF ALERT WINDOW. WITHOUT
// setTimeout, ALERT WINDOW IS GETTING DISPLAYED BEFORE DELETING THE BUTTON.
setTimeout(function() {
displayAndProcessUserTerminateAlertDialog();
}, 200);
function displayAndProcessUserTerminateAlertDialog() {
socket.close();
alert("User terminated the video call. Press 'Ok' button to create new session.");
// BELOW CODE IS GETTING EXECUTED WITHOUT STOPPING FOR USER ACTION ON ALERT WINDOW.
$(".main_container .item").hide();
$("#video-session-menu").removeClass("active");
$("#images-menu").removeClass("active");
$(".sidebar ul li a").addClass("disabled");
}
Can anyone please help me to understand why code execution is not stopped until user presses OK on alert window and how to fix this issue.
UPDATE:
Interesting thing is if I open developer tools, the issue is not happening. If I don't open developer tools, issue is happening always. I am not sure how to fix this issue.
Apparently browsers do not have a standard behavior for alert. As a result, you might want to implement your own alert with the behavior you prefer. You can test it here: https://jsfiddle.net/rf0jd7te/1/
HTML
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Alert Window</p>
<p>
<input type="button" value="OK">
</p>
</div>
</div>
CSS
/* 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 */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
JS
console.log("before alert");
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = modal.getElementsByClassName("close")[0];
// Get the OK element that closes the modal
var OK = modal.querySelector("input[type=button]");
// When the user clicks on <span> (x), close the modal
function close() {
modal.style.display = "none";
console.log("after alert");
}
OK.onclick = span.onclick = function() {
close();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
close();
}
}
modal.style.display = "block";
Alert in JS is only responsible for showing message, try to use window.confirm(message) (check example use case)
I am using a circular button,
border-radius:50%;
And I have an element inside of my element, in order to make the entire button clickable, and not just the content inside of my element.
When I add padding to the element, it makes it so that the entire button is clickable, but due to the fact that the border-radius is 50%, the corners of the button that shouldn't be clickable, are clickable.
I hope this outlines my problem enough, I'll include a jsfiddle if possible.
https://jsfiddle.net/nmcloota/7c95q1ov/5/
add overflow: hidden; to your parent button, so child's content will be hidden
button {
height:200px;
width:200px;
background-color:gold;
border-radius: 50%;
overflow: hidden;
}
https://jsfiddle.net/nd5po7rg/1/ I updated your fiddle
EDIT:
I applied some more styles to make text more centered
take a look: https://jsfiddle.net/1fd5rksg/19/
Hi If I understand correctly, what you're looking for is something like that:
// Show an element
var show = function (elem) {
elem.classList.add('is-visible');
};
// Hide an element
var hide = function (elem) {
elem.classList.remove('is-visible');
};
// Toggle element visibility
var toggle = function (elem) {
elem.classList.toggle('is-visible');
};
// Listen for click events
document.addEventListener('click', function (event) {
// Make sure clicked element is our toggle
if (!event.target.classList.contains('toggle')) return;
// Prevent default link behavior
event.preventDefault();
// Get the content
var content = document.querySelector(event.target.hash);
if (!content) return;
// Toggle the content
toggle(content);
}, false);
.toggle-content {
display: none;
}
.toggle-content.is-visible {
display: block;
}
button {
height:200px;
width:200px;
background-color:gold;
border-radius: 50%;
cursor: pointer;
}
.with-padding {
padding:50px;
}
<button>
<a class="toggle with-padding" href="#example">
Click me to make my friend appear/disappear
</a>
</button>
<button class="toggle-content" id="example">
I am friend</button>
I hope this will help you.
I'm adding a basic functionality to a menu. Whenever the button is clicked the menu toggles from showing to hiding thanks to a css class through Javascript.
However, when ever I try to use this functionality in conjunction with the window.addEventListener, to close the menu on an outside click, it doesn't function.
What is the reasoning behind it?
Here is the code.
<div class="c-wrapper">
<button type="button" class="c-btn"> Click Me</button>
<ul class="c-navigation">
<li>Hi there</li>
<li>Hello</li>
<li>Hola</li>
<li>Konichiwa</li>
</ul>
</div>
I would appriciate some help, thanks.
.c-wrapper{
position:relative;
}
.c-btn{
background-color:royalblue;
border:none;
color:white;
padding:0.5rem 2rem;
cursor:pointer;
outline:none;
}
.c-navigation{
list-style:none;
background-color:#ccc;
position:absolute;
margin:0;
padding:0;
display:none;
li{
margin-top:0.5rem;
}
a{
text-decoration:none;
color:black;
padding:1.4rem;
}
}
.is-active{
display:block;
}
Here is the Javascript I am mentioning.
var button = document.querySelector('.c-btn');
button.addEventListener('click', function(){
document.querySelector('.c-navigation').classList.toggle('is-active');
});
window.addEventListener('mouseup', function(event){
var menu = document.querySelector('.c-navigation');
if(event.target != menu && event.target.parentNode != menu){
menu.style.display='none';
}
});
Try this.
// Get the menu
var menu = document.getElementById('menu');
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target === menu) {
menu.style.display = "none";
}
})
Better avoid to manipulate styles via JS. Better add a class to menu.
menu.classList.add('hidden');
And then add a .hidden class style to CSS.
.hidden {
display: none;
}
Using angularJS, I have a modal that should trigger a input file in order to upload a file.
this is the function that triggers the click
function triggerUploadMethod()
{
inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.onchange = photoChosen;
inputFile.click();
}
The thing that is boring me is that on the FIRST page load, when I open the modal, the trigger is not fired. If I close the modal and open again, the trigger WORKS, and it will keep working until the next page load... What can be happening to not work on the first page load?
This only happens on Chrome. On Firefox, Edge and Internet Explorer the trigger works every time, even after a page load...
As a disclaimer I've never used Angular and since you didn't provide any of the other code, I went with vanilla JavaScript.
As far as I can tell, the error in your code is not from what you posted above. In the snippet below, I have taken code from W3Schools How to Make a Modal Box With CSS and JavaScript and then added your function to the part where it opens the modal on button click and it works fine (I'm on Chrome).
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// This variable isn't defined in your code so I just assume
// it's somewhere at the top.
var inputFile;
// When the user clicks on the button, open the modal.
// Also creates your input and clicks it.
btn.onclick = function() {
modal.style.display = "block";
triggerUploadMethod();
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Create the input element and click it.
function triggerUploadMethod() {
inputFile = document.createElement('input');
inputFile.type = 'file';
// I have no idea what this is so I can't include it.
//inputFile.onchange = photoChosen;
inputFile.click();
}
/* 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 */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
I've been looking all over for a script that will take care of the following issues:
http://jsfiddle.net/k7E9V/3/
Close the div when clicking outside of it.
Close one div when the other one is clicked.
Close the div when "More info" is clicked again.
I'm wondering why the minus icon won't stay put when the div is active and also how to restore the plus icon in all the above scenarios.
The functionality of :active is different than what you have in mind. To be able to toggle the icon, first add a CSS rule like this, instead of the :active one:
a.trigger.isshown{
background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Close-icon.png) 95% 65% no-repeat;
}
Now, you can use .toggleClass('isshown');, .removeClass('isshown'); and .addClass('isshown'); the same way you're toggling/hiding/showing div panels to change the icon as well.
Final version: jsFiddle
I made the :active selector a subclass of .trigger as #Christopher commented and fixed the behavior of the .trigger X button to toggle the class accordingly:
$('.trigger').click(function(event) {
event.preventDefault();
var panel = $(this).next('.panel');
$('.panel').not(panel).hide();
panel.toggle("fast");
$('.trigger').not(this).removeClass('active'); //remove active class from other X buttons
$(this).toggleClass('active'); //toggle the clicked button's active class
});
This way it will remove the active class from the other X buttons, and toggle the current one as requested.
To close the boxes when you click outside the .panel and .trigger, add this inside of your DOM Ready handler:
$(document).click('click', function(e) {
if (!$('.panel').is(':visible')) return;
var targ = $(e.target);
//doesn't close the boxes if target is .panel/.trigger or their descendant
if (targ.closest('.panel').length || targ.is('.panel')
|| targ.closest('.trigger').length || targ.is('.trigger')) return;
$('.panel').hide('fast');
$('.trigger').removeClass('active');
});
http://jsfiddle.net/dwZnG/
Try this out for size.
a.trigger{
position: absolute;
text-decoration: none;
bottom:0;
right: 0;
font-size: 17px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#333;
padding: 20px 30px 10px 15px;
font-weight: 600;
background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Add-icon.png) 95% 65% no-repeat;
display: block;
}
/* Change active to a class name*/
a.trigger.active {
background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Close-icon.png) 95% 65% no-repeat;
}
Then your JS:
$(document).ready(function() {
$('.trigger').click(function(event) {
event.preventDefault();
var me = $(this);
var panel = me.next('.panel');
//If active is there, remove it
if (me.hasClass("active")) {
me.removeClass("active");
}
//If it ain't...add it
else {
me.addClass("active");
}
$('.panel').not(panel).hide();
panel.toggle("fast");
$(document).ready(function() {
$('.panel').hover(function() {
mouse_inside_div = true;
}, function() {
mouse_inside_div = false;
});
$('body').mouseup(function() {
if (!mouse_inside_div) $('.panel').hide();
});
});
});
});
Basically the same thing as Abody said. Once you have this down, you should be able to figure out the rest of the functionality.