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.
Related
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";
}
});
I'm trying to make a small piece of code, so when I click on the question mark, it shows another div. However, when I click on the body, it should hide the just revealed div.
The problem I am running into, is that even though I use .slideUp() when the person clicks on the body (note: the body is only clickable on the height of the ?), it also shows after clicking on the body again. How do I make it so clicking on body won't show the .popover again? If I add .hide() after .slideUp(), it just hides it directly and the slideUp effect is gone.
CodePen
HTML
<div class="center">
<span class="qs">? <span class="popover above">Voeg toe aan wensenlijst</span></span>
</div>
CSS
body {
background-color: #e3fbff;
}
/* Just to center things */
.center {
margin: 100px auto;
width: 30px;
}
/* The element to click on */
.qs {
background-color: #02bdda;
border-radius: 16px;
color: #e3fbff;
cursor: default;
display: inline-block;
font-family: 'Helvetica',sans-serif;
font-size: 18px;
font-weight: bold;
height: 30px;
line-height: 30px;
position: relative;
text-align: center;
width: 30px;
.popover {
background-color: rgba(0,0,0,0.85);
border-radius: 5px;
top: 42px;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
color: #fff;
font-size: 12px;
display:none;
font-family: 'Helvetica',sans-serif;
left: -95px;
padding: 7px 10px;
position: absolute;
width: 200px;
z-index: 4;
}
}
jQuery
$(".qs").click(function(){
$(".popover ").slideToggle();
});
$('body').click(function() {
// Hide all hidden content
$('.popover').slideUp();
});
$('.popover').click(function(e) { e.stopPropagation() });
$('.qs').click(function(e) {
// this stops the event from then being caught by the body click binding
e.stopPropagation();
});
Hide the tooltip when clicking, if it is visible.
You don't need more code than this:
var popover = $('.popover');
var qs = $('.qs');
qs.click(function(e){
e.stopPropagation();
popover.slideToggle();
});
$('html').click(function() {
if(popover.is(':visible')) {
popover.slideUp();
}
});
$('.popover').click(function(e) { e.stopPropagation() });
Codepen
You can check if .popover is visible like:
$('body').click(function() {
// Hide all hidden content
if($('.popover').is(":visible"))
$('.popover').slideUp();
});
Also you don't need to use slideup() and hide() together.
codepen
You need to make sure the popup is not click on you can do a check like this
var mouse_is_inside = false;
$('.popover').hover(function() {
mouse_is_inside=true;
}, function() {
mouse_is_inside=false;
});
$("body").live('mouseup', function() {
if(! mouse_is_inside)
$('.popover').slideUp();
});
Sorry if this is a silly question (I am still new to web development), but is it possible to have a link in a basic confirmation dialog message?
Right now, I have a basic confirmation popup
if (confirm("Bunch of text here"))
...
But a customer wants me to add a link in that confirmation box which would open in a new window. Adding html tags in the message doesn't work since it's a message string.
Any suggestions would be appreciated.
Thanks!
You could make a modal and display it like that, or, even simpler, use bootstrap's built in modal.
HTML:
<div class="button">Click</div>
<div class="overlay">
<div class="modal"></div>
</div>
CSS:
.button {
background-color: #aa0000;
color: #fff;
padding: 5px 40px;
display: inline-block;
cursor: pointer;
}
.overlay {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
height: 100%;
width: 100%;
display: none;
top: 0;
left: 0;
}
.modal {
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
background-color: #fff;
position: fixed;
height: 200px;
width: 200px;
}
JS:
$(function() {
var button = $('.button'),
overlay = $('.overlay'),
message = 'Message text',
modal = $('.modal');
button.on('click', function() {
overlay.css('display', 'block');
modal.html( message + '' + 'link' + '');
});
});
http://jsfiddle.net/HNe95/
That's not possible with the Javascript's confirm function. In order to do that you need a custom modal dialog.
If you use jQuery, you could create one by use one of these: vex, alertify, and apprise to name a few.
If you don't use jQuery, you can create one by applying some CSS and Javascripts for events. You could also follow this guide.
I have a textarea and I want to allow the user to click on it, and on click I would like to show them a form.
On click and show form can be easily done with jquery as per my knowledge of UI development.
But how to put a icon inside the textbox/textarea? Something like this
I tried to search for demos of this but could not find any.
Here
<textarea row=100 cols=60></textarea>
<span class="ui-icon ui-icon-arrowthick-1-n" id="arrow"></span>
CSS
#arrow{
margin-left:-20px;
position:relative;
}
textarea{
float:left;
}
See it in action
http://jsfiddle.net/N99Vs/
There you go, I have updated the jsfiddle for you.
http://jsfiddle.net/WTpPH/115/
Basically
html
<div>
<textarea></textarea>
<a href='#'>c</a>
</div>
css
div { position:relative; width: 200px; }
textarea { display: inline-block; width: 100%; height: 200px }
a{
background-color:red;
position: absolute;
right: 2px;
bottom: 8px;
}
textarea + a {
display: none;
}
textarea:hover + a {
display: block;
}
textarea + a:hover {
display: block;
}
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})