jquery, link

I have webpage called default.aspx and inside the code I have <a href=opennewwindow.aspx title="_blank">Me</a>

When "ME" is clicked, I want a new window opened in the center of the webpage
and gray out the default.aspx. How can I do that with jquery or javascript?

Remember, it is a new window. it is totally separate webpage from default.aspx

Thanks
solution1368Asked:
Who is Participating?
 
leakim971PluritechnicianCommented:
Check this : http://jsfiddle.net/q7A9X/
$(document).ready(function() {
    $("a[title='_blank']").click(function(evt) {
        evt.preventDefault();
        if(!$(this).hasClass("disabled")) {
            $(this).addClass("disabled");
            var url = $(this).attr("href");
            var width = 320;
            var height = 200;
            var left = (screen.width/2)-(width/2);
            var top = (screen.height/2)-(height/2);
            window.open(url, "popup", "width=" + 320 +",height=" + height + ",top=" + top + ",left=" + left);
        }        
    })
})

Open in new window

0
 
solution1368Author Commented:
It is only working in the first click. after the pop up is closed, the link is no longer working.
0
 
solution1368Author Commented:
and the background does not gray out.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
leakim971PluritechnicianCommented:
the link is no longer working.

Open in new window


so you mean a disabled link still should work?
0
 
solution1368Author Commented:
yes. and I comment $(this).addClass("disabled") and it looks working. Am I doing the right thing? And the background gray out still not happening....
0
 
leakim971PluritechnicianCommented:
yes
0
 
Rainer JeschorCommented:
Hi,
just to question:
do you really really want a new browser window?
Or do you "just" want  a modal overlay like this jQuery dialog sample:
http://jqueryui.com/dialog/#modal-form

Thanks.
Rainer
0
 
leakim971PluritechnicianCommented:
RainerJ :

Remember, it is a new window. it is totally separate webpage from default.aspx
0
 
solution1368Author Commented:
leakim971:

1. the background still not gray...what can i do?
2. I tried to hide the url. and add location=0 or location="no" but still not working.

<script language="javascript" type="text/javascript">
     $(document).ready(function () {
         $("a[title='_blank']").click(function (evt) {
             evt.preventDefault();
             if (!$(this).hasClass("disabled")) {
                 //$(this).addClass("disabled");
                 var url = $(this).attr("href");
                 var width = 1300;
                 var height = 700;
                 var location = "no";
                 var resizble = "no";
                 var left = (screen.width / 2) - (width / 2);
                 var top = (screen.height / 2) - (height / 2);
                 window.open(url, "popup", "width=" + width + ",height=" + height + ",top=" + top + ",left=" + left + ",location=" + location);

             }
         })
     })

 </script>
0
 
leakim971PluritechnicianCommented:
where did you talk about the grey background and hidding the url in your main question?
0
 
solution1368Author Commented:
background:

a.disabled {
    color:grey;
}

1. Look like above does not fire up.
2. the location property I tried to add, but it does not fire up as well.  If you don't answer this one it is okay because I don't ask it in the question. this is just something I am thinking to do after the question is posted.


Thanks.
0
 
leakim971PluritechnicianCommented:
1 - no it work fine, it's applied to the link (a tag, not to the page)
2 - there's no solution to this problem, it's a security feature to let people know where they put their foot
0
 
Rainer JeschorCommented:
@ leakim971:
I have read the initial statement:
Remember, it is a new window. it is totally separate webpage from default.aspx
but most user /devs without current Javascript / jQuery experience do not know the possibilities and the wording of elements. Therefore a new window could also be a dialog / popup and with the jQuery UI dialog you can absolutely open another page.
Therefore I asked to clarify: is the requirement really a new browser window OR more like a dialog - especially the comment with graying out the background rings some bells in my mind that this is a jQuery UI dialog :-)
0
 
leakim971PluritechnicianCommented:
@RainerJ
You should read its previous questions especially the ones opened
0
 
Rainer JeschorCommented:
And once more:
hiding the location bar sounds again more and more like a dialog!
Like
http://jsfiddle.net/qp7NP/

or this ASP.NET sample:
http://forums.asp.net/t/1659926.aspx
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
just a heads up, this person has asked the same question 2 times before (that I know of), got answers, but did not like them. answer at your own risk....
0
 
smeghammerCommented:
Hi solution1368,

Rather than focussing on a pre-conceived technical solution, please describe the BUSINESS requirement. It may well be that you do indeed have a valid business requirement that dictates two separate browser windows, but maybe not...

Essentially, please describe what it is you want the end users to see/do from a UX PoV, not from an underlying programmatic PoV. e.g:

user goes to application display A (this, in your context, is a web application)
user clicks 'ME'
area C (the background/parent window) of current web application display becomes grey [we need to know why/what should be interactive at this point]
Area D, the rectangular area appears in the middle (that might be a popup, a hidden DIV or a new window - doesn't actually matter form the end-user's PoV as long as the expected BUSINESS requirement is fulfilled).

The experts can offer much better advice if the description of what is required is clear. Various possible solutions have been offered, but a clear business requirement that explained your resistance to the options already offered would greatly assist and is more likely to elicit a solution that would suit your actual needs.

Cheers
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.