This question already has answers here:
How to create a custom "confirm" & pause js execution until user clicks button?
(6 answers)
Closed 6 years ago.
I want to simulate a block dialog like window.alert(), window.confirm(), or window.prompt() with DIV+JavaScript. It seems easy using a callback function. But I want to block the process while the confirm dialog is shown.
That is to say, I want to define a function like:
var Alert = function(){ balabala };
which returns true or false after I click OK or Cancel.
EDIT:
For now I defined a function called Confirm() and now I have to call it like
Confirm(*callback*);
and in the implementation I show a dialog like confirm and when OK is clicked the callback will be executed. I wonder whether it is possible to rewrite it so that I can call it like
if(Confirm()) {
callback();
} else {
balabala;
}
You can't block the user from using their browser IE switching tabs and doing other things on them before they come back to yours, like an alert() call does. But you can block them from using anything on your page until they answer the question. You can just fill the entire body with an absolute positioned div that has a z-index greater than the rest of your page, and give your popup a z-index one higher than that and center it.
Of course a user can still use things like Chrome developer tools or Firebug to remove your blocking div, so it's not a secure thing.
Edit I misread your question. You don't care about blocking the page visually but are wanting to make the popup's return value synchronous with the rest of your script instead of asynchronous with a callback. I'm not sure how to go about that.
Maybe this will be of use to you: https://developer.mozilla.org/en/Code_snippets/Threads#Waiting_for_a_background_task_to_complete
Unfortunately, there's no way to simulate synchronous code calls with just JavaScript. You can create pure DOM-based dialogs, but in order to have code execute when they close, you'd need to have it accept a callback or return a Promise. Unfortunately, this doesn't make for the most clean code.
Related
Is it possible in some way to hack the behaviour of window.location.replace, to fire a JavaScript function (let's say alert) instead of making the user go to the new location?
I'll give you the example, let's say we have this function:
setTimeout(function(){ window.location.replace("#SOMETHING_HERE#"); }, 900);
this is fired when a user clicks on a specific button; the #SOMETHING_HERE# is a placeholder, the administrator can put there a URL via a configuration panel.
Now, we all know clients are weird, and mine has just asked me to find a way to fire a JavaScript instead of redirect the user, well, I'm stuck. Of course I should modify the function bound to the button, but actually I have no access to the code and the only entry point is that panel I've mentioned before, I can only change the value of #SOMETHING_HERE#.
Do someone has some clues on how I could for example fire an alert("foo"); ? is that possible in some way?
the answer could be also "NO" and I'll simply say them that we have to find a way to change that code.
You can prefix your string with javascript::
setTimeout(function(){ window.location.replace("javascript:alert('hello world!')"); }, 900);
This works because the spec for location.replace ends up at the definition for "navigate", which says:
This is the step that attempts to obtain the resource, if necessary. Jump to the first appropriate substep:
...
If the new resource is a URL whose scheme is javascript
Queue a task to run these "javascript: URL" steps, associated with the active document of the browsing context being navigated:
I want to skin my own confirmation dialog using bootstrap modal without having to hook up events and without resorting to any library, except angular or jquery.
Basically, I want to be able to call something like:
if (myConfirm("text")) {
// handle yes
} else {
// handle no
};
myConfirm is supposed to show the modal, wait until either yes or no button was pressed and then return true or false.
What's the best way to do this?
I am not concerned at all about any IE issues.
Your best bet for a blocking function is the old window.showModalDialog method (which has excellent IE support, btw). But you should not use it.
Make it event-based. Especially when for learning purposes. You won't get the bootstrap modal without events. If you want a nicer abstraction, return a Promise from your function.
Is it possible to make a custom alert/confirm/prompt that have the same behaviour as native javascript windows (without using callbacks/asynchronous events)?
Ex.:
if(mytest == true){
myCustomMsgWindow('message'); //Pause execution
//do something
}
I tried this once but dint works for confirm window because it must return a value.
You can make custom ones but their behavior will not be the same.
Because in the browsers these boxes pause the execution thread, and resumed by user action. you can not pause the execution thread, this is implicit.
However there are some workaround which may behave almost similar. You can try that
BootBox
No, you cannot write JS code that blocks (pauses execution) waiting for user input on without alert or confirm. You have to listen for events within your dialog asynchronously (through events)
The solution is use callbacks as you have already mentioned, not sure why you don't want to use that.
I'm trying to create a alert using jQuery. But the problem is it is not a blocking call. I need to call this in a loop after checking some cases. If the user has entered some wrong content at first though a text essay, i need to present user to fix one line after checking errors.
Is there any way to block coding without using while loops or anything.
There is no way in JavaScript to make a blocking call. There is no wait()/sleep() in JavaScript. You need to break up the logic into two steps.
just wanted to know if it is programatically possible to halt the execution of script the same way javascript function "confirm" does. "confirm" stops further execution of script until user input, i want to acheieve same thing for BlockUI plugin of Jquery.
No, you cannot.
confirm, like the alert function, is a modal dialog, which is nothing more than a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.
Javascript has no sleep-ing mechanism. If you want to stop the execution of a script... it's only possible by executing another script that is memory/CPU expensive (such as an infinite loop) that will freeze the browser (thus stopping the targeted script from executing), but that kind of defeats the purpose.
If you know what you want to do, you can organize your code in such a manner that you can simulate the sleep process.
A good way of doing that is using callbacks combined with timeouts:
function f1(callback){
// do some stuff
// decide how much you want to wait
setTimeout(callback,how_much_you_want_to_wait);
}
I don't think its possible... the best you can do is,
show an overlay div which prevents any other user interactions on page
show your html popup in front of the overlay
in the code, use callbacks or 'jquery binders' or 'event listers' to execute the rest of the code
A rough example could be,
function showDialog(fn){
$('#overlay').show()
$('#dialog').show().click(fn); // ideally bind the click to the close button of the dialog
}
now, to show the dialog,
// code before the dial
showDialog(function(){
// execute rest of the code
})
Javascript has no sleep function that may be available in other languages. The best you can do is a setTimeout.
You could possibly do while true style loop but that will just spike CPU usage which is usually not encouraged.