Solved

Jquery modal dialog on all hyperlink clicks in a Div

Posted on 2011-03-23
9
757 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 51

Expert Comment

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

Expert Comment

by:Huseyin KAHRAMAN
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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
LVL 51

Expert Comment

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

Accepted Solution

by:
Huseyin KAHRAMAN 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:Huseyin KAHRAMAN
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:Huseyin KAHRAMAN
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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
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…

733 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