Close modal by clicking outside the box - javascript

Can I use simple css to close modal by clicking outside the box? I have seen examples of how to do it using jQuery/JavaScript. I have it set up right now so that it closes when clicking the 'x' and no JavaScript is being used:
<div>X</div>
And then in my css file:
.close {
opacity: 10px;
background-color: darkblue;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}

This can't be accomplished with just plain CSS.
Javascript is there to make your page dynamic and reactive, so you should be using it to listen for events and for manipulating what is shown to the user.

Rather than using CSS you could use a button that calls a Javascript function to open the modal like so:
jQuery:
<button id="modal-button" onclick="openModal();">Open Modal</button>
HTML:
<script>
function openModal()
{
$('#myModal').modal('show');
}
</script>
Using this method you will be able to click off the modal to close it.

If you can alter the html and place a hidden checkbox and an extra overlay before the modal, then yes, I have a solution for you.
HTML
<input type="checkbox" id="modal-toggle" class="modal-toggle" />
<label for="modal-toggle" class="modal-overlay"></label>
<div class="modal">
<label for="modal-toggle" class="modal-close-button">X</label>
</div>
CSS
.modal-toggle,
.modal-overlay,
.modal {
display: none;
}
.modal-toggle:checked + .modal-overlay,
.modal-toggle:checked + .modal-overlay + .modal {
display: block;
}
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.modal {
position: absolute;
/* I've used absolute here to note that the modal can't be static */
/* add other properties to position this div */
z-index: 2;
}
From w3schools.com:
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
How does it work? We have a hidden overlay and modal right after an input. When this input gets checked the overlay and modal will be shown.
The overlay and the close button are the labels of the checkbox so clicking on these will uncheck the input, thus hides the modal. You will need another label somewhere in your html which will bring up the modal of course.
You can read about the "+" css selector here.
Full list of css selectors
You can use multiple modals on the same page, just make sure every modal has its own unique id and for attribute value. The question didn't mention if the modal has to be animated on show/hide, that is possible too.

you can close the div by clicking out side
add this code to your js file or inside your <script> </script> tag
replace the ID_OF_DIV with id of the div you want to close
document.body.addEventListener("click", function() {
var element = document.getElementById("ID_OF_DIV");
if (element) {
element.style.display = "none";
}
});

Related

Create Popup for existing button

edit: i cant edit the original code, since the button and its function is provided by a plugin. If could find the initial JS for the function of the button, i would hide the first one and recreate / modify it myself if thats somehow possible..
I have a button which is already styled and running a javascript function (cant find the code for it).
Is it possible to create a popup for that existing button?
Found this tutorial on how to create a popup on W3
<div class="popup w3-text-blue" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<style>
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent; }
span#myPopup.popuptext.show {
visibility: visible;
}
</style>
<script>
// When the user clicks the div, open the popup
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show');
}
</script>
but cant make it work for an existing button.
All info i have for that button:
<button type="button" class="class class2 class3" data-overwrite-fields="1"><i class="fas fa-check fa-fw"></i> Submit</button>
(the i class is an svg image)
Is it possible to create a popup for that button or should i move on?
You could try wrapping the button in a div with an onclick for the div, in which you preventDefault(), then show your popup, and use JS or jQuery to "click" the button you can't modify.
Something like this:
<div onclick="yourOwnFunction">
<button id="buttonId"></button> <!-- Button you can't change -->
</div>
Then:
function yourOwnFunction(event){
showPopup();
event.preventDefault();
}
Note, this assumes that you don't want the button's function to execute before your popup is displayed. If this is the case, once the user does what is needed on your popup, you can then "fire" the button's function with something like this:
function whatHappensWhenModalIsClosed(){
document.getElementById("buttonId").click();
}
Notes
There are a lack of details in the question that make this a bit tricky. Because the <button> in question does not have an id set and there appears to be other buttons with potentially the same class, a lot of assumptions have to be made.
Ideally if we know the parent element, we can use that as a selector first to narrow the results, then attempt to select our button. Also, if any siblings or nearby elements have an id set, we could use things like nextElementSibling() or the closest() methods to grab this specific button.
Solution
The approach however is to grab all of the potential buttons and loop through them. From there, I am checking to make sure the data-overwrite-fields attribute is equal to 1 and that the text within the button is equal to submit (forced to lower case). Without more information from OP I cannot guarantee these criteria will limit the result to only 1 button, but this should be a useful start for OP to translate into a solution.
The next steps are to copy the button, add a new event listener (as well as the popup element) and then replace the old button with the newly created one.
const _ReplaceButton = () => {
document.querySelectorAll("button.class.class2.class3").forEach(b => {
// Because we do not know if there are other buttons with this class,
// we must try to narrow it down
if(b.dataset.overwriteFields != "1" || b.innerText.trim().toLowerCase() != "submit") return
// Copy the button and create the popup element
let newButton = b.cloneNode(true),
popup = document.createElement("div")
// Set the event listener for the new button
newButton.addEventListener("click", myFunction)
// Set the class and content for the popup
popup.className = "popup w3-text-blue"
popup.innerHTML = `<span class="popuptext" id="newPopup">New Button!</span>`
// Replace the old button
b.replaceWith(newButton, popup)
})
}
function myFunction() {
document.getElementById('newPopup').classList.toggle('show');
}
.popup {
position: relative;
display: inline-block;
height: 1.2em;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 0;
margin-left: -108px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
span.popuptext.show {
visibility: visible;
}
<p>This is just example text used to fill this element. This text has no meaning and only serves as placeholder content.</p>
<button type="button" class="class class2 class3"><i class="fas fa-check fa-fw"></i> Button 1</button>
<button type="button" class="class class2 class3" data-overwrite-fields="1"><i class="fas fa-check fa-fw"></i> Submit</button>
<p>This is just example text used to fill this element. This text has no meaning and only serves as placeholder content.</p>
<button type="button" class="class class2 class3" onclick="_ReplaceButton()">Swap Button</button>
Initially the button will do nothing (it likely has an event listener already attached to it, which is irrelevant here as that is removed when the element is cloned). After clicking Swap Button, the old button is removed and the new one runs myFunction() and displays the popup.

Close Modal using CSS only

I need to close my modal just by using css like this: http://jsfiddle.net/raving/1mhsynmw/
However, I can't get it to work. My modal below.
function alert(msg) {
document.getElementById("alert").innerHTML = '<div class="modal-overlay"><div class="modal"><div class="modal-container"><h3>' + msg + '</h3><p>' + msg + '</p></div><p class="modal-footer">OK</p></div>';
}
alert("This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal.");
body {
font-family:arial;
font-size:11px;
}
.modal {
position: fixed;
top: 20px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
width: 200px;
box-shadow: 0 4px 6px 1px rgba(50, 50, 50, 0.14);
background: #fff;
}
.modal p {
cursor:default;
}
.modal-container {
padding: 10px;
}
.modal p a {
color:#555;
}
.modal-footer a {
display:block;
border:1px solid #eee;
width:9.5%;
padding:3px;
background:#fff;
text-decoration:none;
float:right;
}
.modal-footer {
background: #fafafa;
border-top: 1px solid #eee;
margin-bottom: 0px;
margin-top:0px;
padding:8px;
height:25px;
}
.modal h3 {
margin:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 175px;
}
.modal-last {
padding-bottom:0px;
}
.modal-overlay:before {
content: '';
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<div id="alert"></div>
<h3>Content..</h3>
<p>Just to show it's a modal</p>
QUESTION: Is there any way to close the modal without using Javascript? And it that is not possible, how can I use Javascript to close this modal?
If you don't want to use JQuery to close the modal when you click on the ok button you could do something similar to the following code with plain JavaScript. You will have to assign an index to the selector to get it to work.
//begin click event
document.getElementById("ok").addEventListener("click",function(event){
/* Hide the element with a class name of modal.
note:If there is more than one element with the class name
modal then this code will only select the first one in the
collection of elements
*/
document.getElementsByClassName("modal")[0].style.display = "none";
});//end click event
I don't believe there is a css only way to close/hide the modal upon clicking the OK button. However, it should be very easy to close with plain Javascript. Depending on whether you want to hide the modal (but keep it in the DOM), or actually remove the modal elements you could implement it like this.
// To hide, run this inside a click callback
document.getElementById('modal').classList.push('hide');
.hide {
display: hidden;
}
// And to remove
var modal = document.getElementById('modal');
modal.parentNode.removeChild(modal);
Also you would have to add a #modal id to your modal, instead of just a class (unless you want to use document.getElementsByClassName)
Based on your js code, you are injecting modal elements into the dom document.getElementById("alert").innerHTML = 'modal stuff' if you want to get rid of it, the most simplest way, use an empty string like this: document.getElementById("alert").innerHTML = ''
CSS way would be something like display: none.
The proper way you should close it, by invoking javascript close function, which would remove modal and clean up after itself (so old code is not there anymore). This method depends on the types of modals and what you want to achieve.

How to remove jQuery-ui dialog title bar?

I am trying to hide jQuery-ui dialog's title bar but keep the close button in the title bar visible. I have searched lots of post on stackoverflow like this one. In each post the title bar is hidden but the space taken by the bar is still there. I want to remove that space also but without removing the close button.
How can i do this?
Based on this answer:
Use .dialog("widget") option to locate the div wrapper for the dialog. The wrapper contains all the markup used for the dialog including header, title bar and close button; and the dialog content itself. Here is one way to invoke the method and hide the title bar:
$("#id").dialog({
autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​
You can then use CSS to eliminate unnecessary margin, border and padding. For example:
.ui-dialog-titlebar {
float: right;
border: 0;
padding: 0;
}
.ui-dialog-titlebar-close {
top: 0;
right: 0;
margin: 0;
z-index: 999;
}
Here is a demo based on above code plus it adds the necessary styles using jQuery.
If you want to remove the titelbar and keep the close icon using styles only, use the styles below. It shrinks the title bar to the size of the close icon and hides it behind. ui-icons_6e6e6e_256x240.png i created by lightening the ui-icons_222222_256x240.png image that jqueryui comes with.
.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}
.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}
.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}
.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}
.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}
.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}
The way I see it, you have 3 options.
Yes, eliminate the titlebar completely and add a custom one that you can style to match the default one, using absolute positioning should be the key.
If you have the time, extend (not overwrite) the _create method of the dialog https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 to do what you need
Work with CSS hackery to keep the titlebar there with a height of 0 for all elements but the close button.
Either one has their cons and pros, I would recommend #2 the best if you can, here's some info on how to work with widgets http://api.jqueryui.com/jQuery.widget/
This is How it can be done.
Go to themes folder--> base--> open jquery.ui.dialog.css
Find
Followings
if you don't want to display titleBar then simply set display:none as i did in the following.
.ui dialog.ui-dialog .ui-dialog-titlebar
{
padding: .4em 1em;
position: relative;
display:none;
}
Samilarly for title as well.
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
display:none;
}
Now comes close button you can also set it none or you can set its
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 21px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
display:none;
}
I did lots of search but nothing then i got this idea in my mind. However this will effect entire application to don't have close button,title bar for dialog but you can overcome this as well by using jquery and adding and setting css via jquery
here is syntax for this
$(".specificclass").css({display:normal})

Fading out JavaScript "modal window" when background is clicked?

I have a modal-like window in CSS that I fade in with JavaScript. The HTML is like this:
<div class="whiteout">
<div class="modal">
<a class="modal-close" title="Close"></a>
// modal window content
</div>
</div>
And the CSS is like this:
.whiteout {
display: none;
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.7);
}
.modal {
position: fixed;
left: 50%;
top: 50%;
z-index: 200;
border: 12px solid #666;
border: 12px solid rgba(0, 0, 0, 0.5);
-moz-border-radius: 12px;
border-radius: 12px;
}
I'm using jQuery to show the modal window when I click a link, with the "whiteout" background, and I want it to fade out when I click the background.
$('.share-link').click( function() {
$('.whiteout').fadeIn();
return false;
} );
$('.whiteout').click( function() { // click the background
$(this).fadeOut();
} );
$('.modal-close').click( function() { // close button on the modal window
$('.whiteout').fadeOut();
} );
However, it fades out whenever I click the modal window, as well as the background, because technically that is inside the "whiteout" element. Is it possible to stop that happening when I click inside the .modal element?
try this:
$('.whiteout').click( function(e) { // click the background
if(e.target == this)
$(this).fadeOut();
} );
The best thing might be to move the whiteout div to the end of the body, entirely outside the content area. With the right CSS, the whiteout element can live anywhere in the DOM but still achieve the right effect.
As an example, take a look at how jQuery UI’s dialog works, it does almost exactly this.

Z-index & jQuery Toggle

I have a few divs arranged horizontally that acts as buttons on a navigation bar. When this button is clicked, a hidden submenu div will be made visible below the button that was clicked, but above all the other buttons.
Problem: The submenu div that appears stayed above all the other button divs even though the z-index if the button div that was clicked was changed to be larger than the submenu div's z-index. Will be great to have some help with this! :)
HTML Code
<div class="filter_tab" id="filter_tab_rent"><p>Min/Max Rent</p></div>
<div id="filter_submenu_rent">
Hello
</div>
jQuery Code
$("#filter_tab_rent").click(function(e) {
$("#filter_tab_rent").toggleClass('filter_tab_selected');
$("#filter_submenu_rent").toggle();
});
CSS Code
.filter_tab {
height: 38px;
min-width: 50px;
border: 1px solid #D9D9D9;
border-bottom: none;
float: left;
}
.filter_tab_selected {
z-index: 500
}
#filter_submenu_rent {
width: 300px;
height: 50px;
background: #FFF;
position: absolute;
top: 65px;
display: none;
z-index: 100;
border: 1px solid #D9D9D9;
box-shadow: 0px 2px 5px #888;
}
Additional Info: I'm using Chrome to view this.
z-index will only work with elements position relative and absolute. Add a position to your .filter_tab_selected style.

Categories