Develop Reference

Custom Popup Displaying Before Closing Browser

I need a java-script or jquery code so that when every only I close my browser or
tab of the browser then my custom popup from will come out,
I don't want browser's default massage . I want to hide the default massages of the browsers
only my popup form will be displayed before closing.
And it need to be supported in three major browsers IE9,Firefox,Crome.
Again I am mentioning the default messages which comes from browsers which have two options 1.leave page 2.stay on page I want to hide them
Thanks in Advance,

No, that is not possible - and thats for a good reason!
Imagine, everyone could hide these messages from Browser, it would be a paradise for every criminal!

You can pop a dialogue on .unload(). Last I checked this was supported on IE/FF/Chrome/Safari but not Opera.
As for hiding the buttons to confirm that you want to leave the page or not, those can not be hidden or removed. As Haudegen said, for very good reason.

jQuery:
$(window).bind('beforeunload', function(){
return 'Dialog text here.';
});
JavaScript:
window.onbeforeunload = function(e) {
return 'Dialog text here.';
};

How to trigger javascript on print event?

Is it possible to trigger a javascript event when a user prints a page?
I would like to remove a dependancy on a javascript library, when a user opts to print a page, as the library is great for screen but not for print.
Any idea how to achieve this?

For anyone stumbling upon this answer from Google, let me try to clear things up:
As Ajay pointed out, there are two events which are fired for printing, but they are not well-supported; as far as I have read, they are only supported in Internet Explorer and Firefox (6+) browsers. Those events are window.onbeforeprint and window.onafterprint, which (as you'd expect) will fire before and after the print job.
However, as pointed out in Joe's link (https://stackoverflow.com/a/9920784/578667), that's not exactly how it is implemented in all cases. In most cases, both events fire before the dialog; in others, script execution might be halted during the print dialog, so both events may fire at the same time (after the dialog has been completed).
For more information (and browser support) for these two events:
https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeprint
https://developer.mozilla.org/en-US/docs/DOM/window.onafterprint
The short answer: if you're hoping to interfere with the print flow, don't. If you're hoping to trigger code after printing, it's not going to work how you're wanting; expect poor browser support, and try to degrade gracefully.

It can be done by overwriting, e.g., window.onbeforeprint.
Using Chrome, I found that the more arcane window.matchMedia("print").addListener(function() {alert("Print Dialog open.")}) also works.
This debatable feature can be used in order to deter users from printing a page.
I've encountered it the first time on Scribd. There, if you open the print dialog using the menu command, the page content will be greyed out and a warning pop-over message appears explaining why you can not print the page. (Note for complete analysis: on that page, control-p is also overriden so you can not use it to open the print dialog at all. Additionally, there is a #media CSS for printer output that hides the content; all tested on Firefox).

I have implemented for disabling printing using window.onbeforeprint()
/*Block printing*/
window.onbeforeprint = (event) => {
console.log("onbeforeprint function");
printDiabled();
};
function printDiabled() {
var headstr = " <span style='font-size: large; font - weight: bold; color: Red''>PRINT IS DISABLED</span>";
//var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr;
}
/*Block printing*/

if you have a scenario where u want to do something before print dialog appears or just after the document is sent to printer queue use can use the below events
window.onafterprint , window.onbeforeprint

For anyone coming here looking for an option using Bootstrap as I was, I used the following code to achieve this when a print button is clicked. This won't work when they press CTRL + P.
$("#print_page").click(function(){
$("#print_section").addClass('visible-print-block');
window.print();
$("#print_section").removeClass('visible-print-block');})
You need to add hidden-print to anything you don't want printed and then add an ID (or a class if you have more than one section) of print_section to the bit you want printed! Bit hacky but it works!

Gray-out the background when popup opens

I call below javascript on click of link/textbox or button.
function OpenPopupLinkRisk(Number)
{
window.open("../PopUp.aspx?id=" + Number, "List", "scrollbars=no,resizable=yes,width=700,height=450");
return false;
}
I donot want user to do anything else until he closes the popup window. So how can I grey background and force user to first close the popup and then do any other activity on application.
Can anyone suggest me how to achieve this ?
Thanks !

First of all, i would really disrecommend using window.open for this unless you really need a new browser popup window. If you want to stick with it persee, then will have to use a timer or something to manually check when the window is closed like:
var popup = window.open('http://www.example.com', 'example', '');
var timer = setInterval(function() {
if(window.closed) {
clearInterval(timer);
alert('Closed alright');
}
}, 100);
Else, check some tutorials on the subject, Modal Popup

First a direct solution to you problem that I wouldn't advice using it an then an approach you should be taking and is better from usability as well as security point of view.
Check whether popup window has closed
// mask your page
mask();
// open popup
var popup = window.open("../PopUp.aspx?id=" + Number);
// check whether it's been closed
function check()
{
if (popup && !popup.closed)
{
setTimeout(check, 1000);
}
// unmask your page
unmask();
}
check();
Modern (and better) alternative
Using window.open is a bad solution because it's a security risk and popup blockers prevent sites to open new windows. It's also considered bad practice.
A much better modern alternative is to display the new page as modal window inside your page directly. This will not open new windows and users stay as they are.
There are tons of javascript plugins for modal windows. Make a Google search.

Popups in a Safari extension

Im trying to build my first safari extension and Im at a loss on a few basic concepts.
The first hurdle is making a popup window open from a toolbar button, just like the Ebay Safari extension.
http://anywhere.ebay.com/browser/safari/welcome/

Read this: http://net.tutsplus.com/tutorials/other/how-to-create-a-safari-extension-from-scratch/
It describes how to have something happen when a toolbar button is pressed, you would just put it the middle of this:
<script>
// Set up the Listener
safari.application.addEventListener("command", performCommand, false);
// Function to perform when event is received
function performCommand(event) {
// Make sure event comes from the button
if (event.command == "open-nettuts") {
**YOUR FUNCTION**
}
}
</script>

As far as I know, Safari does not allow us to create a "popup" the way Chrome does. For my Safari extension I am using jQueryUI to create my popup. You can also use YUI or Mootools. In taking apart the eBay and Twitter extensions I see they're using an iframe. Just how they're implementing it I don't know since jquery doesn't allow you to modify the contents of an iframe (correct me if I'm wrong here).
But to answer your question, your button will send an event to an injected script. That script can have code similar to this:
$('body').append('<div id="mypopup">');
var myPopup = $('#mypopup').dialog({
'autoOpen' : false ,
'draggable' : false,
'modal' : false,
'resizable' : false,
'title' : 'My Popup'
});
function messageHandler(msgEvent) {
var messageName = msgEvent.name;
var messageData = msgEvent.message;
if (messageName === 'buttonPushed') {
if (myPopup.dialog('isOpen')) {
myPopup.dialog('close');
return;
}
$('#mypopup').children().empty(); // Clear out any crap should it exist
$('#mypopup').append(someHTML);
myPopup.dialog('open');
return;
}
}
}
This is a very basic example. In mine there is a toolbar, and a host of other things. Plus you have to have REALLY specific CSS rules to protect your popup's CSS from being clobbered by every site in the world.
I have also thought about using global.html to open the "popup" window but as far as I can tell, all it can do is open a window. I don't see any facilities for setting attributes like size, etc. If there are, I'd go that route since your popup would then be protected from CSS as it's in its own window.

I think under Safari its called a popover, thats what you mean?
two things that i noticed:
if there is no command set (on the toolbar item), the popover automatically displays when clicking the toolbar button
If there is a command set, then the user need to click and keep the toolbar button pressed until the popover shows.

The proper way to handle popup closing

I'm looking for close event for popup. I've found one for XUL, but I need it for HTML.
Popup has closed property.
>>> var popup = open('http://example.com/', 'popup', 'height=400,width=500');
>>> popup.closed
false
Well, I can check it once at half second.
function open_popup() {
var popup = open('http://example.com/', 'popup', 'height=450,width=450');
var timer = setInterval(function(){
if (popup.closed) {
alert('popup closed!');
clearInterval(timer);
}
}, 500);
}
I've tested it on Chrome 4.0.249.27, Opera 10.10, Safari 4.0.4, and Firefox 3.5.5. All works fine.
But setInterval bother me. It is ugly. Is there a better way of doing this?
UPDATE:
I use popups for authentication dialog (oAuth, actually). I wanna send some data to parent window after popup close (through postMessage).
Page inside popup from another domain. So, I can not add any event (unload) to it due security restrictions.
I can not use iframe due to iframe buster script. So, I can not use any fancy jQuery modal dialogs.
I can not edit anything inside popup.

You might want to look into the unload event, take a look at Javascript: Popups
edit: as you've said you cannot edit anything inside the popup, there really aren't any options left. I believe your current setInterval code does the job just fine. You should ask yourself if realtime detection of the popup closing is absolutely critical. That 500 milliseconds timer certainly won't strain hardly any resources or bring someones computer to its knees.

I have used jQuery Dialog and it has a close event
http://jqueryui.com/demos/dialog/.
Am not sure if I understand your question right,why do you want to use the timer ?

Use window.opener in the pop-up window. i.e. something like:
onunload = opener.alert('popup closed');
or
onunload = opener.nameOfAFunction();