Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Jquery modal dialog on all hyperlink clicks in a Div

Posted on 2011-03-23
9
Medium Priority
?
771 Views
Last Modified: 2012-05-11
In my project, I have a page where I need to show a modal dialog on the click of all the hyperlinks.

The popup has two buttons Images "Continue" and "GoBack". I wrote some jquery which I found on this Stackoverflow website. But there is a problem with code.

Suppose I have 5 hyperlinks in this page. When I click on the first link its opening the dialog and when I click on continue its opening the link properly.

But when I click on the second link its opening again the first link and the second link two separate windows, Which is wrong it supposed to open only second link.

When I click on the third link again its opening first,second and third links in 3 windows.

I guess I am doing a small mistake in my code. If anyone help me fixing this I really appreciate.

Thanks for your help in advance. Here is my jquery code:


<script type="text/javascript">
$(document).ready(function() {
                    //  $(".leaving-the-site-container").hide(); 
                  $(".linkdialog").click(function(e){
                    e.preventDefault();                            
                    var targetUrl = $(this).attr("href");                     
                    alert(targetUrl);
                           
                            $(".leaving-the-site-container").dialog({        
                                width:452,
                               // autoOpen:false,
                               // height:225,
                                modal:true,
                                closeOnEscape:false,
                                draggable:false,
                                scrollbars:false,
                                position: ["center", 240]
                                });                                                      
                                                      
                             $("#btnContinue").click(function(){                            
                                    window.open(targetUrl);                                     
                                    $(".leaving-the-site-container").dialog("close");                                                                         
                              }); 
                              
                              $("#btnTakeMeBack").click(function(){
                                    $(".leaving-the-site-container").dialog("close");
                              });
                      });
                       
                 });
</script>

Open in new window

0
Comment
Question by:ken_rgr
[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
  • 6
  • 3
9 Comments
 
LVL 60

Expert Comment

by:HainKurt
ID: 35204156
please post the links and style sheet too...
0
 
LVL 60

Expert Comment

by:HainKurt
ID: 35204160
also code for these one

.leaving-the-site-container
0
 

Author Comment

by:ken_rgr
ID: 35204241
Hi HainKurt
Style sheet is jquery-ui.css  style sheet

Code for ".leaving-the-site-container"

<div class="leaving-the-site-container" style="display:none"  >
      <div class="leaving-the-site-content">
        <p>You are about to leave the Work web site.*</p>
        <p style="font-size: 11px; line-height: 15px;">*Links and contacts.</p>
        <center>
        <a href="#"><img src="images/continue.jpg" id="btnContinue" style="margin: 6px 0px 10px 0px;" /></a><br />
        <img src="images/gray-divider2.jpg"><br />
        <a href="#"><img src="images/no-take-me-back.jpg" id="btnTakeMeBack" style="margin: 10px 0px 0px 0px;" /></a>
        </center>
      </div>
    </div>
0
Independent Software Vendors: 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 60

Expert Comment

by:HainKurt
ID: 35204281
and the code for dialog addon...
0
 
LVL 60

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 35204302
got it, check this sample
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
<script type="text/javascript">
$(document).ready(function() {
                  var targetUrl;                     
                    //  $(".leaving-the-site-container").hide(); 
                  $(".linkdialog").click(function(e){
                    e.preventDefault();                            
                    targetUrl = $(this).attr("href");                     
                    alert(targetUrl);
                           
                            $(".leaving-the-site-container").dialog({        
                                width:452,
                               // autoOpen:false,
                               // height:225,
                                modal:true,
                                closeOnEscape:false,
                                draggable:false,
                                scrollbars:false,
                                position: ["center", 240]
                                });                                                      
                                                      
                             
                      });
                       
                       $("#btnContinue").click(function(){                            
                                    window.open(targetUrl);                                     
                                    $(".leaving-the-site-container").dialog("close");                                                                         
                              }); 
                              
                              $("#btnTakeMeBack").click(function(){
                                    $(".leaving-the-site-container").dialog("close");
                              });
                 });
</script>

<a class="linkdialog" href="http://google.ca">google</a> | 
<a class="linkdialog" href="http://yahoo.ca">yahoo</a> | 
<a class="linkdialog" href="http://microsoft.ca">ms</a>

<div class="leaving-the-site-container" style="display:none"  >
      <div class="leaving-the-site-content">
        <p>You are about to leave the Work web site.*</p>
        <p style="font-size: 11px; line-height: 15px;">*Links and contacts.</p>
        <center>
        <a href="#"><img src="images/continue.jpg" id="btnContinue" style="margin: 6px 0px 10px 0px;" /></a><br />
        <img src="images/gray-divider2.jpg"><br />
        <a href="#"><img src="images/no-take-me-back.jpg" id="btnTakeMeBack" style="margin: 10px 0px 0px 0px;" /></a>
        </center>
      </div>
    </div>

Open in new window

0
 
LVL 60

Expert Comment

by:HainKurt
ID: 35204314
you add click function together, that was the problem...

first link has one click function, second has 2, third has 3

now they call the same function out of dialog click function...
0
 
LVL 60

Expert Comment

by:HainKurt
ID: 35204318
next time, create a sample like the one I posted to get quick answer :)
we just copy paste and run your fully working sample to see the error and fix it...
0
 

Author Comment

by:ken_rgr
ID: 35233015
Hi HainKurt

Thanks for your solution.
Its working exactly, the way  I wanted .

I appreciate your time and help, and I accept your answer as Best  solution.


0
 

Author Closing Comment

by:ken_rgr
ID: 35233023
Great solution.
Very much appreciated
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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)
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…
Suggested Courses

597 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