?
Solved

Jquery modal dialog on all hyperlink clicks in a Div

Posted on 2011-03-23
9
Medium Priority
?
768 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 58

Expert Comment

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

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 58

Expert Comment

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

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 58

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 58

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

Industry Leaders: 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!

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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 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

765 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