Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Opening a second modal window using jQUery
Posted on 2011-03-12
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 “<strong>OK</strong>”, 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 “<strong>OK</strong>”, 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?
[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
5
14 Comments
Active 3 days ago
Just always close the window before you open a new one.
<script>
var saveLink;
.
.
onBeforeClick: function(event) {
if (saveLink) links[saveLink].overlay().
and where you open the window do
saveLink = element.id
<script>
var saveLink;
.
.
onBeforeClick: function(event) {
if (saveLink) links[saveLink].overlay().
and where you open the window do
saveLink = element.id
Active 3 days ago
Try to just change this
onBeforeClick: function(event) {
if (clicked) links[clicked].overlay().c
var element = e.originalTarget || e.srcElement;
clicked = element.id
},
onBeforeClick: function(event) {
if (clicked) links[clicked].overlay().c
var element = e.originalTarget || e.srcElement;
clicked = element.id
},
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(func
var spt = "#" + $(this).attr("id");
//alert(spt);
$(spt).html('<a class="modalInput" rel="#disclaimer" href="mailto:'+$(spt).html
var clicked;
var links = [];
var triggers = $(".modalInput").overlay({
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().c
}
var element = e.originalTarget || e.srcElement;
clicked = element.id;
}
}
});
});
</script>
I am getting an error with the onBeforeClick function
<script>
$(document).ready(function
// First type see comment for example #1
$('span.mailme').each(func
var spt = "#" + $(this).attr("id");
//alert(spt);
$(spt).html('<a class="modalInput" rel="#disclaimer" href="mailto:'+$(spt).html
var clicked;
var links = [];
var triggers = $(".modalInput").overlay({
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().c
}
var element = e.originalTarget || e.srcElement;
clicked = element.id;
}
}
});
});
</script>
I am getting an error with the onBeforeClick function
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.
Bus uing the following...it worked
$(document).ready(function
$('span.mailme1').each(fun
var spt = "#" + $(this).attr("id");
$(spt).html('<a href="mailto:'+$(spt).html
});
});
the clas name could stay the same but the id had to be different.
$(document).ready(function
$('span.mailme1').each(fun
var spt = "#" + $(this).attr("id");
$(spt).html('<a href="mailto:'+$(spt).html
});
});
the clas name could stay the same but the id had to be different.
Featured Post
MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
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…
Originally, this post was published on Monitis Blog, you can check it
here
.
In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month7 days, 7 hours left to enroll
Earn Certification
Certified Web Development Professional
$335.99
632 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.