Solved

Jquery modal dialog on all hyperlink clicks in a Div

Posted on 2011-03-23
9
749 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
Comment Utility
please post the links and style sheet too...
0
 
LVL 51

Expert Comment

by:HainKurt
Comment Utility
also code for these one

.leaving-the-site-container
0
 

Author Comment

by:ken_rgr
Comment Utility
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
 
LVL 51

Expert Comment

by:HainKurt
Comment Utility
and the code for dialog addon...
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 51

Accepted Solution

by:
HainKurt earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Great solution.
Very much appreciated
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

772 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

9 Experts available now in Live!

Get 1:1 Help Now