Solved

Opening a second modal window using jQUery

Posted on 2011-03-12
14
438 Views
Last Modified: 2012-08-14
I am using the jQuery Tools Ui to create modal windows. The problem I am having is everytime I click a e-mail link, I need to display the same modal window alerting users about a disclaimer. If the uses accepts, then the e-mail address will load in a e-mail client. If they close the window nothing happens. When a user clicks a different e-mail link, the e-mail client opens with no modal. I need ht modal to always open when an e-mail is clicked. Please see the code below:
$(document).ready(function(){
			// First type see comment for example #1
				$('span.mailme').each(function(){
					var spt = "#" + $(this).attr("id");
					
					//alert(spt);
					$(spt).html('<a class="modalInput" rel="#disclaimer" href="mailto:'+$(spt).html().replace('|','@').replace('/','').replace(':','.')+'">'+$(spt).html().replace('|','@').replace('/','').replace(':','.')+'</a>');
					var clicked;
					var links = [];
					var triggers = $(".modalInput").overlay({     mask: {         color: '#333',         loadSpeed: 200,         opacity: 0.9     },      onBeforeClick: function(event) {         var element = e.originalTarget || e.srcElement;         clicked = element.id     },      closeOnClick: false });
					var buttons = $("#disclaimer button").click(function(e) {
						var yes = buttons.index(this) === 0;
						if(yes) {
							window.location = links[clicked].attr("href");
							links[clicked].overlay().close();
						}
					}); 
					
				});
			});


The email address examples are:

Joe Schmoe, Finance Assistant - <span class="mailme" id="email2">/schmoe|testdomain:com</span><br />
           	Joe Schmoel Jr, Systems Manager - <span class="mailme" id="email3">/schmoel|testdomain:com</span>


Here is the modal window:

<div class="modal" id="disclaimer">
	<h3>DISCLAIMER</h3>
	<div class="dtext">
	<p><strong class="heading">Use of this website</strong>. The material provided on this website is provided for informational purposes only. The recipient of the content of this site should not act or refrain from acting based upon any content included in the site without seeking the appropriate legal or professional advice based on the particular facts and circumstances at issue. The content of the site contains general information and may not reflect current legal developments.</p>
	<p><strong class="heading">Use of email</strong>. You should not send any confidential information to us. By clicking   &#8220;<strong>OK</strong>&#8221;, you acknowledge that any information sent to us by email or through the website is not secure and shall not be deemed   confidential. <strong>The transmission of information to or from the website does not create a relationship.</strong></p>
	<p>In addition, by clicking &#8220;<strong>OK</strong>&#8221;, you acknowledge that information sent to us through this website shall be deemed public and may be disclosed to others. It shall not be the basis of any claimed conflict of   interest.</p>
	</div>
	<!-- input form. you can press enter too -->
	<div class="buttons">
		<button type="submit"> OK </button>
		<button type="button" class="close"> Cancel </button>
	</div>
	<br />
</div>


Any ideas?

Open in new window

0
Comment
Question by:asaworker
  • 6
  • 5
14 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35121933
Just always close the window before you open a new one.

<script>
var saveLink;
.
.


onBeforeClick: function(event) {
  if (saveLink) links[saveLink].overlay().close();

and where you open the window do
saveLink = element.id
0
 

Author Comment

by:asaworker
ID: 35123537
Can yu show me an example using my code what you mean?
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 250 total points
ID: 35125602
Try to just change this

      onBeforeClick: function(event) {  
       if (clicked) links[clicked].overlay().close();
        var element = e.originalTarget || e.srcElement;  
        clicked = element.id  
      },  
0
 

Author Comment

by:asaworker
ID: 35126725
Hmm...doesn't seem to work. Here is the updated code based on your last post:

<script>
 
                  $(document).ready(function(){
                  // First type see comment for example #1
                  $('span.mailme').each(function() {
                        var spt = "#" + $(this).attr("id");
                        //alert(spt);
                        $(spt).html('<a class="modalInput" rel="#disclaimer" href="mailto:'+$(spt).html().replace('|','@').replace('/','').replace(':','.')+'">'+$(spt).html().replace('|','@').replace('/','').replace(':','.')+'</a>');
                        var clicked;
                              var links = [];

                        var triggers = $(".modalInput").overlay({      expose: {         color: '#333',         loadSpeed: 200,         opacity: 0.9     },                                          closeOnClick: false});
                        



                        
                        
                            
                              var buttons = $("#disclaimer button").click(function(e) {
                        // get user input
                              var yes = buttons.index(this) == 0;
                              // do something with the answer
                              if(yes) {
                                    window.location = triggers.eq(0).attr("href");
                                    onBeforeClick: function() {  
                                           if (clicked) {
                                                      links[clicked].overlay().close();
                                          }
                                      var element = e.originalTarget || e.srcElement;  
                                      clicked = element.id;
                                    }
                              }
                        });
                  });
            </script>

I am getting an error with the onBeforeClick function
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35126745
What error?
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35126748
Can you please MOVE

var clicked;

to just after the <script> tag


0
 

Author Comment

by:asaworker
ID: 35134663
that still doesn't work...getting an error in ie. Also once the overlay is closed it won't re-open...my fix for ths was to repeat the code foe each popup instance...i was hoping to simplify it.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35135334
I have requested attention for you
0
 

Author Comment

by:asaworker
ID: 35194327
Help...Any updates?
0
 

Accepted Solution

by:
asaworker earned 0 total points
ID: 36947634
Bus uing the following...it worked

$(document).ready(function(){
            $('span.mailme1').each(function() {
                  var spt = "#" + $(this).attr("id");
                  $(spt).html('<a href="mailto:'+$(spt).html().replace('|','@').replace('/','').replace(':','.')+'">'+$(spt).html().replace('|','@').replace('/','').replace(':','.')+'</a>');
            });
});

the clas name could stay the same but the id had to be different.
0
 

Author Closing Comment

by:asaworker
ID: 36975275
My solution fixed the problem
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
JDeveloper 12c for 32 bit 4 35
Problem to picture file 3 41
Angular - (very close) following an example 20 36
Problem to page 4 27
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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 how to dynamically set the form action using jQuery.
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…

760 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

21 Experts available now in Live!

Get 1:1 Help Now