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
Solved

Jquery modal dialog on all hyperlink clicks in a Div

Posted on 2011-03-23
9
755 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
  • 6
  • 3
9 Comments
 
LVL 51

Expert Comment

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

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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 51

Expert Comment

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

Accepted Solution

by:
HainKurt earned 500 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 51

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 51

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

840 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