Solved

jquery, link

Posted on 2013-11-14
19
292 Views
Last Modified: 2013-12-26
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
0
Comment
Question by:solution1368
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 3
  • +2
19 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39648663
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
 

Author Comment

by:solution1368
ID: 39648874
It is only working in the first click. after the pop up is closed, the link is no longer working.
0
 

Author Comment

by:solution1368
ID: 39648888
and the background does not gray out.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 82

Expert Comment

by:leakim971
ID: 39648890
the link is no longer working.

Open in new window


so you mean a disabled link still should work?
0
 

Assisted Solution

by:solution1368
solution1368 earned 0 total points
ID: 39648918
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39648930
yes
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39648936
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39648946
RainerJ :

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

Author Comment

by:solution1368
ID: 39648964
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39648983
where did you talk about the grey background and hidding the url in your main question?
0
 

Author Comment

by:solution1368
ID: 39649001
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39649027
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
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39649028
@ 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
 
LVL 82

Expert Comment

by:leakim971
ID: 39649038
@RainerJ
You should read its previous questions especially the ones opened
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39649050
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
 
LVL 33

Expert Comment

by:Big Monty
ID: 39649204
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
 
LVL 4

Expert Comment

by:smeghammer
ID: 39674280
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question