From MDN:
Dialog boxes are modal windows — they prevent the user from accessing
the rest of the program's interface until the dialog box is closed.
I tried to capture the event when a dialog box appear on the screen using window.confirm
but it seems it doesn't exist on the window level.
My question:
Is there any way to mimic the click when a dialog box appears on screen?
The above code listen and print all the events made on the page, but when I click on the button nothing printed, and when I click "ok" or "cancel" it print "FocusEvent" - I guess that this is the focus on the clicked button.
document.querySelectorAll('button')[0].addEventListener('click', function(){
window.confirm('confirmation box','click');
});
for (var key in window) {
if (key.search('on') === 0) {
document.querySelectorAll('ol')[0].innerHTML += '<li>'+key.slice(2)+'</li>';
window.addEventListener(key.slice(2), function() {
document.querySelectorAll('ol')[1].innerHTML += '<li>'+key.slice(2)+'-'+this.event+'</li>';
document.querySelectorAll('ol')[1].scrollTop = document.querySelectorAll('ol')[1].scrollHeight;
});
};
};
<button>open dialog</button>
<ol style="display: none;"></ol>
<ol style="height: 200px; overflow-y: scroll"></ol>
This confirm box seems on higher level from the window(??)
I did search a lot online but the best (and only) clues lead to 404 pages:
DOMWillOpenModalDialog
DOMModalDialogClosed
Is it possible?
Related
I'm trying to fix the multiple dialog box appearing issue, where upon pressing fn key, dialog box appears to get input from user.Whenever i press fn key,the dialog box appears even when one of same dialog box is already opened.Then user needs to press cancel multiple times to close this dialog box. So i need to prevent this multiple dialog box from appearing when it is already opened.Condition to open dialog box is written in Js
You have not described specific dialog box you use, so I created a sample one and demonstrated the solution.
What you should do it to implement a singleton design pattern, and Here is a sample Code I wrote in codepen.
JS:
class singleModal{
static isOpen=false;
static id='dialog';
static openModal(){
if(!singleModal.isOpen) {
console.log("modal opened!")
singleModal.isOpen = true;
document.getElementById(singleModal.id).style.display='block';
}
}
static closeModal(){
if(singleModal.isOpen) {
console.log("modal closed!")
singleModal.isOpen = false;
document.getElementById(singleModal.id).style.display='none';
}
}
}
singleModal.id = 'myDialog';
function openModal(){
singleModal.openModal();
}
function closeModal(){
singleModal.closeModal();
}
HTML:
<div class="dialog" id="myDialog">
Dialog
</div>
<button onclick="openModal()">open</button>
<button onclick="closeModal()">close</button>
codepen
I have implemented the following requirement:
1) Initially a contact us button.
2) Upon clicking one window with 3 options will come
3) one of them is to show live chat box(like phplive chat/ zenduslive chat etc) by hiding the existing window.
But the problem is that, after clicking the submit button by selecting the live chat radio button option, it is taking some time to show live chat box after the exsiting window gets hiddden. What I need is to reduce the time delay between showing live chat widget and closing the window with radio button options. Also upon submitting the button, live chat showuld be visible in such a way that "a window that actually had the login form to type the question".
Eg of live chat : http://livechat.mirrormx.net/
SNIPPET CODE:
(function( $ ) {
$('#submit').click(function(){
var selValue = $('input[name=chat-options]:checked').val();
if (selValue == "form-one") {
$("#contacts-popup-link").click();
} else if (selValue == "form-two") {
$("#contacts-popup-link1").click();
} else if (selValue == "live-chat") {
$("#loader").show();
$("#text-7").fadeOut(1700, "swing"); // hiding the window contatining
$.getScript("//testwebsite.com/livechat/php/app.php?widget-init.js"); //loading the live chat using this url
}
});
==============================================
<div id="customer-chat-widget" class="customer-chat customer-chat-widget contact-form"> - normal chat box without window have form type question.
<div id="customer-chat-widget" class="customer-chat customer-chat-widget contact-form customer-chat-visible"> - a window that actually had the form to type the question(auto popup on each time user see the chat)
Thanks
I have a problem where a revealed DIV does not close on the first attempt. The user has to click at least once, anywhere on the page - doesn't have to be the close button, before they can click CLOSE to actually close the DIV. First off though, there is a short lead up before the DIV.
I use a jquery mobile popup in my page to contain a single text field and submit button. It looks something like this (minus the layout). The user submits their note through this popup.
<div data-role="popup" id="popupBasic" data-corners="false">
<textarea rows="9" name="note" id="AttitionalNoteText"></textarea>
Submit
Cancel
</div>
When the user hits submit, I perform an ajax response to send the text to the server and upon success follow it up by revealing a hidden DIV as confirmation to the user. I use a DIV instead of another popup since I realized that chaining popups is not possible within my ajax call.
// this is called when the user hits submit in the popup
$("#submitnote").click(function (e) {
e.preventDefault();
// do stuff here to pass textstring
$("#popupBasic").hide();
$.ajax({
type: 'POST',
data: textstring,
url: '/something/addnote',
success: function (data) {
showConfirm(data); // upon success call the function below to open the DIV
}
});
$("#AttitionalNoteText").val("");
});
function showConfirm(data) {
document.getElementById("confirmMsg").innerHTML = data;
$("#confirmBox").show();
}
// this is to close that DIV
$("#closeConfirmBox").click(function (e) {
$("#confirmBox").hide();
});
Here's that simple DIV along with a close button.
<div id="confirmBox">
<div id="confirmMsg" style="padding: 10px; font-size: 16px;">
this message gets replaced with whatever ajax call returned
</div>
Close
</div>
It seems that after the popup hides and my DIV comes up, the mouse does not show as a finger pointer until I've click somewhere on the page once. Only then can I use the Close button on the DIV properly. The same happens on mobile, I have to tab somewhere on the screen before I can tap again on Close. What can I do about this?
$("#popupBasic").hide();
$("#popupBasic-screen").hide();
Added the above just before the ajax call.
I think this wouldn't have been a problem if there was a proper solution to .popup("close") being undefined.
The problem is that you are not using the popup widget's close method, you are just hiding the div and leaving the modal screen in place.
Change;
$("#popupBasic").hide();
To:
$("#popupBasic").popup( "close" );
Working DEMO
BTW, if you do want to go with chained popups, have a look at this blog entry I wrote: http://jqmtricks.wordpress.com/2014/05/16/chained-popups-with-simpledialog2/
UPDATE - this was solved by adding $('.popup-with-form').magnificPopup('open'); to the StateChanged function in the JS. Thanks to #Bollis.
Original Question:
I have a simple calculator here: http://www.roofingcalculator.org/popup/popup.htm
when click on "Calculate" button, i need results to be displayed on that page AND initiate Ajax Popup (Magnific inline) with results displayed in popup as well.
Question: How do i make it so that pressing "calculate" button would both of these at the same time:
1) display results on page
2) Launch pupup with results of calculator
Right now, to show Popup, user needs to click on the link "Open Form".
If you open popup AND don't click "calculte" button, no results are displayed.
If you click Calculate first and then open popup, results are shown on both the page and in popup (see image).
The two things that initiate popup are:
<a class="popup-with-form" href="#test-form">
If i add class="popup-with-form" and href="#test-form" to the Calculate button, it launches popup, but no calculation is done.
All codes for calculator (JS / PHP) can be seen here.
Here is AJAX code that opens popup (i think)
$(document).ready(function() {
$('.popup-with-form').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
}
}
});
});
Try adding onsubmit="openPopupFunctionHere()" to your form tag. The onsubmit event will be triggered whenever the form should submit, which happens when you press the "Calculate" button.
Is possible trigger an event if user click outside page? More specifically, in the browser title bar or tab bar?
Try this my jsFiddle example.
HTML
<div id="box">
<div id="menu">Click here</div>
<div id="show">Hello!</div>
</div>
JS
jQuery('div#menu').on('click', function(ev) {
jQuery('div#show').addClass('visible').css({
top: ev.clientY,
left: ev.clientX
});
return false;
});
jQuery(document).click(function() {
jQuery('div#show').removeClass('visible');
});
jQuery(window).blur(function() {
jQuery(document).click();
});
TESTS
First you click in "Click here" button. So...
Try to click in some document part: Ok
Try to click in some page part or unfocus browser window: Ok
Try to click in some other opened tab in your browser: Ok
Try to click in browser title bar or tab title: Fail
SO...
It's possible I solve this problem?
TEST RESULTS
Chrome: fail on last;
Firefox: fail on last;
IE10: fail on last;
Opera: fail on last;
I'm sorry to tell you this, but this isn't possible.
Reason? Well essentially, clicking the title bar/tab bar of a window doesn't actually make an element lose focus.
Try this example here:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onblur
You'll notice that clicking the title bar/tab bar doesn't make the textbox lose focus at all, which is the root of the issue.
I don't think this is a big deal for your project though. As far as the user's concerned, it'll look great as it currently is.