Solved

jquery, link

Posted on 2013-11-14
19
287 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
  • 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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 32

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now