i am currently implementing a modal dialog screen into my website for the registration page, to save time for you i am not going to lie and say that i am following this tutorial - http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
It all works fine except it does not show how to close the dialog on the user clicking outside of it, like on the rest of the body around it.
How can i do this?
Thanks for your help
You simply need to call overlay() again from whatever event you want to trigger the close. It toggles the visibility of the overlay (if the overlay is visible, calling overlay() hides it and vice versa):
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
You may also consider using something like jQuery UI's dialog widget.
Related
I'm using wordpress with visual composer and I have built this demo popup example https://www.air8cushion.com/index.php/popup-test/ when I click on "More Info" button the popup shows up. However when I scroll content inside of it, and close the modal window, and again click on "More Info" I need to reset the content to appear from the top again.
I know its possible to do it with JS but I had fails many times to make it work. Most of examples of similar things online are mostly for Bootstrap and none of them worked for me.
Thanks.
You can use this on click of the close button of your popup
this function will scroll viewport of the popup div to top when clicked
jQuery(document).on('click','.vc_general',function(){
var myDiv = document.getElementById('myNav');
myDiv.scrollTop = 0;
});
".vc_general" is one of the class in your close button. You can add an extra class if you think it will affect the other functionality.
I'm working in a project using bootstrap framework and I read there are different ways to open a modal window, in my case I open it with javascript with this code:
$('#formVenta').modal({backdrop: 'static', keyboard: false});
I did this because the client asked me to avoid close the modal when click outside but now he wants to press click outside and close the modal again but when there is no content inside a specific div inside my window
<div id="content_goes_here"></div>
I think to solve this in this way
$(document).click(function(e) {
//check if modal is open
if ($('#formVenta').is(':visible')) {
//check if div has content
if ($('#content_goes_here').html().length > 0) {
//do something
}
}
});
The problem I see is that there are text input outside that div and If I want to search something it will close when I make click in the input because there will be not content yet inside the div and I want to avoid this issue.
Is there a way where only when I make click outside the modal window check if the div is empty and make the opposite of the way I opened the window in this case the opposite of this?
$('#formVenta').modal({backdrop: 'static', keyboard: false});
for example change the value of the property backgrop.
I hope you can help me, thanks.
sorry it took a while to find the right properties but here is the best example
$('#formVenta').data('bs.modal').options.backdrop = false; or
$('#formVenta').data('bs.modal').options.backdrop = static;
you can take a look at the current properties you have set by doing
alert(JSON.stringify($('#myModal3').data('bs.modal').options)); or change the alert to console.log()
so you can put an event on the div for when it changes to run the validation function and inside of the validation function you can change the options of the modal with the above code
Okay, so I have questions about two things. Look at my drag and drop script on: http://bouncygames.org/smell.php. First of all, when I click the X button on the draggable window I made, I need to click it twice, the first time I click it, things get all messed up, then I have to click it again for everything to disappear. How do I make it so I can only click the X one, to get the window div to disappear Also, I want it so only if you drag the TITLE place, it drags, not the main part of the div. How can I make it so I can control the window with only the title? Thanks.
or better
function setVisibility(id) {
document.getElementById(id).style.display = 'none';
//What is the rest here?
if(document.getElementById('aid').value=='Hide Layer'){
document.getElementById('aid').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('aid').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}
I created an example for you where:
The dialog is dragged using only the title bar.
The close button closes the dialog.
I know it is not a answer with deal with your code and I'm using jQuery and jQueryUI (the draggable module), but I think that using this approach would be better since the draggable issues are well controled by a tested library like jQueryUI.
Tale a look: http://jsfiddle.net/davidbuzatto/s9T4b/
I've written a site that uses jQuery to display a modal popup. It essentially covers the entire viewable area of the screen with an overlay, then shows a DIV that contains the actual popup on top of the overlay. One of the requirements for this project has to do with accessibility.
When the page loads, the screen reader starts reading from the top of the page. When a user clicks on a particular link, we display a modal dialog. My question is: how do I interrupt the screen reader's reading of the main portion of the site and tell it to start reading the dialog text?
My modal container is wrapped in a div like this:
<div id="modalcontainer" tabindex="0" class="popup" role="dialog" aria-labelledby="dialog-label" >
The jQuery that fires the modal looks like this:
$("#modalLink").click(function (e) {
e.preventDefault();
$("#modalcontainer").center();
$("#modalcontainer").show();
$("#closeBtnLink").focus();
$("#wrapper").attr('aria-disabled', 'true');
});
The "closeBtnLink" is the close button within the modal dialog. I would have thought setting the focus on this would instruct the screen reader to start reading from that element.
The "wrapper" element is a SIBLING of the modal dialog. Per a suggestion from another SO user for different reasons, I set "aria-disabled=true" on the wrapper element that contains the entire page. The modal dialog exists as a sibling outside of this container.
My main goal here is to get the screen reader to read the contents of my modal DIV element when they click on a specific link. Any help would be appreciated.
This can be accomplished using ARIA role="dialog". you'd have to modify this code for your example, it's vanilla js, so yours will probably be shorter/easier via jQuery.
HTML:
<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1">
<h3 id="myDialog">Just an example.</h3>
<button id="ok" onclick="hideDialog(this);" class="close-button">OK</button>
<button onclick="hideDialog(this);" class="close-button">Cancel</button>
</div>
JavaScript:
var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground;
function showDialog(el) {
lastFocus = el || document.activeElement;
toggleDialog('show');
}
function hideDialog(el) {
toggleDialog('hide');
}
function toggleDialog(sh) {
dialog = document.getElementById("box");
okbutton = document.getElementById("ok");
pagebackground = document.getElementById("bg");
if (sh == "show") {
dialogOpen = true;
// show the dialog
dialog.style.display = 'block';
// after displaying the dialog, focus an element inside it
okbutton.focus();
// only hide the background *after* you've moved focus out of the content that will be "hidden"
pagebackground.setAttribute("aria-hidden","true");
} else {
dialogOpen = false;
dialog.style.display = 'none';
pagebackground.setAttribute("aria-hidden","false");
lastFocus.focus();
}
}
document.addEventListener("focus", function(event) {
var d = document.getElementById("box");
if (dialogOpen && !d.contains(event.target)) {
event.stopPropagation();
d.focus();
}
}, true);
document.addEventListener("keydown", function(event) {
if (dialogOpen && event.keyCode == 27) {
toggleDialog('hide');
}
}, true);
source: http://3needs.org/en/testing/code/role-dialog-3.html
more reading: http://juicystudio.com/article/custom-built_dialogs.php
It is your responsibility as a developer to present the content of a page in a way that makes it readable for the screenreader.
from http://www.anysurfer.be/en/index.html:
Use the right HTML tags to structure your documents. By doing so, assistive technologies can translate headings, paragraphs, lists and tables to braille or speech in a comprehensible manner.
Make sure that the website is also operable without using the mouse. In most situations, no special actions are required, except if - for instance - you use dropdown menus. This particular guideline is of great importance to visitors that are only able to use the keyboard.
You can make your audio and video fragments accessible to visitors with an auditive or visual constraint by adding subtitles or by offering a transcription.
Never solely rely on colors to convey structural information. The message ‘The fields in red are mandatory’ has no use for a blind person or someone who is colorblind.
A refreshable braille display cannot display images. Therefore, you should add short descriptions for images and graphical buttons. They don't appear on the screen, but they do get picked up by the screenreader software used by the blind and visually impaired.
The use of technologies like Flash and JavaScript should be well-considered. Moreover, heavy animations and flickering are very disturbing for people who suffer from dyslexia or epilepsy.
But is ultimately the responsibility of the screen reader to make
sure that it stops and starts when it makes sense to the user, if not
possible the user should pause the reader itself.
Because of the large variety of screen readers out there, what you
are asking seems quite impossible.
aria-hidden="true" will make screen readers to not perceive that element and its content, which means that it will not be read out.
aria-label will set the text which assistive technologies (screen readers, etc) will perceive.
http://www.w3.org/TR/wai-aria/states_and_properties
Can you use ARIA Live Regions? https://developer.mozilla.org/en/ARIA/Live_Regions
Then in Javascript during the modal display, swap the regions with assertive and off.
I faced the same issue and solved with following setp's
created one more div (#message) inside modal container wrapper to place all the message
And set aria-labelledby attribute to the close button to point to the #message container
First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});