CODEWITHSUNDEEP
javascript
RMN
RMN

Reputation: 752

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 !

Upvotes: 1

Views: 1898

Answers (2)

Robert Koritnik
Robert Koritnik

Reputation: 105039

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.

Upvotes: 2

Polity
Polity

Reputation: 15130

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

Upvotes: 2

Related Questions