Response title
This is preview!
Move this topic
Jquery Tabs and Reveal Modal conflict!
in Using jQuery Plugins
•
9 years ago
First, I am a newbie and not a coder so apologies in advance. I have implemented the Jquery Tools tabs (jquerytools.org/demos/tabs/index.html) on my page and it works as expected. I can tab back and forth without issue. I have since added the reveal Jquery Modal plugin (zurb.com/playground/reveal-modal-plugin) to links inside each of the tabs. When I load the page, I can go to any one tab and click a link in that tab and the modal will work perfectly. the problem is, when I then click on ANY other tab, and then try and click on a modal link, the overlay doesnt appear and after clicking on a few tabs it freezes.
So basically, the tabs work, but the modal links only work in the first tab i click them in, but no tabs thereafter. I am not code orientated, but I have tried a hundred different possible fixes I've found across the internet but to no avail. If anyone has any idea how to fix this conflict so that the reveal modal links work in all tabs, I would really appreciate it.
In terms of the code, I downloaded the plugins as they are in the links above, so apart from editing paths in the script srcs in the head, they are pretty much as downloaded. The <head> section has them in this order (its the only order it will work in):
<link rel="stylesheet" href="css/tabs.css" />
<link rel="stylesheet" href="css/reveal.css">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.reveal.js"></script>
thanks in advance for any help you can give! If you need me to provide the reveal.js code or anything let me know (it's unchanged from the download).
sd
1
Replies(2)
Re: Jquery Tabs and Reveal Modal conflict!
9 years ago
Can you provide a page that demonstrates the problem?
Re: Re: Jquery Tabs and Reveal Modal conflict!
9 years ago
Thanks for getting back to me! I don't have the page online at the minute, but I have posted the code for you. I have stripped it right down to nothing but the default downloaded
code. There is little extra coding added, so its as pure as I can get.
Again, the modal popups will work correctly in whichever tab you choose
in the first instance - they just dont work correctly on any subsequent
tab i select! If you click on the modal link in tab 1 for example, it
works. If you then click on the modal link in tab2, there is no
overlay/mask for the tab. If you THEN click back on tab 1, it freezes
completely with nothing on screen but the modal overlay!
[HTML]
[HTML]
- <!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/tabs.css" />
<link rel="stylesheet" href="css/reveal.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.reveal.js"></script>
</head>
<body>
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>First tab content. Tab contents are called "panes"
<a href="#" data-reveal-id="myModal1">Click Me For A Modal</a>
<div id="myModal1" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
</div>
<div>Second tab content
<a href="#" data-reveal-id="myModal2">Click Me For A Modal</a>
<div id="myModal2" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
</div>
<div>Third tab content
<a href="#" data-reveal-id="myModal3">Click Me For A Modal</a>
<div id="myModal3" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
</div>
</div><!--end of panes-->
<script>
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>
Here is the Reveal.CSS file:
- /* --------------------------------------------------
Reveal Modals
-------------------------------------------------- */
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000 !important;
background: rgba(0,0,0,.8)!important;
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
background: #eee url(../img/modal-gloss.png) no-repeat -200px -80px !important;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 18px;
right: -45px;
color: #aaa; /* this value is for the 'x' in the modal box */
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
Here is the TABS.CSS file
/*page*/
body{
font-family:Arial, Helvetica, sans-serif;
}
.tabs_wrapper{
width:100%;
}
/* tab pane styling */
.panes div {
padding:15px 10px;
border:1px solid #999;
border-top:0;
min-height:220px;
background:#fff;
}
/* root element for tabs */
ul.tabs {
list-style:none;
margin:0;
padding:0;
border-bottom:1px solid #999;
height:30px;
}
/* single tab */
ul.tabs li {
float:left;
text-indent:0;
padding:0;
margin:0;
list-style-image:none;
}
/* link inside the tab. uses a background image */
ul.tabs a {
display:block;
height: 30px;
line-height:30px;
width: 81px;
text-align:center;
text-decoration:none;
color:#000;
padding:0px;
margin:0px;
position:relative;
top:1px;
}
ul.tabs a:active {
outline:none;
}
/* when mouse enters the tab move the background image */
ul.tabs a:hover {
background-position: -553px -31px;
color:#000;
}
/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
background-position: -553px -62px;
cursor:default !important;
color:#333 !important;
font-weight:bold;
text-shadow:2px 2px #C2C3CF; /*adds a grey shadow to the text on the selected tab */
}
/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
/* width 1 */
ul.tabs a.s { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover { background-position: -553px -31px; }
ul.tabs a.s.current { background-position: -553px -62px; }
/* width 2 */
ul.tabs a.l { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover { background-position: -248px -31px; }
ul.tabs a.l.current { background-position: -248px -62px; }
/* width 3 */
ul.tabs a.xl { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }
/* initially all panes are hidden */
.panes .pane {
display:none;
}
and finally, the jquery.reveal.js. This - like the jquery.tools.min - has not been changed from the downloaded version.
- /*
* jQuery Reveal Plugin 1.0
* www.ZURB.com
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
/*---------------------------
Defaults for Reveal
----------------------------*/
/*---------------------------
Listener for data-reveal-id attributes
----------------------------*/
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
});
/*---------------------------
Extend and Execute
----------------------------*/
$.fn.reveal = function(options) {
var defaults = {
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
};
//Extend dem' options
var options = $.extend({}, defaults, options);
return this.each(function() {
/*---------------------------
Global Variables
----------------------------*/
var modal = $(this),
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');
/*---------------------------
Create Modal BG
----------------------------*/
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}
/*---------------------------
Open & Close Animations
----------------------------*/
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
modal.unbind('reveal:open');
});
//Closing Animation
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
modal.unbind('reveal:close');
});
/*---------------------------
Open and add Closing Listeners
----------------------------*/
//Open Modal Immediately
modal.trigger('reveal:open')
//Close Modal Listeners
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
});
/*---------------------------
Animations Locks
----------------------------*/
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
}
});//each call
}//orbit plugin call
})(jQuery);
Thanks again for your help!
SD
Leave a comment on kbwood.au's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to seanboy50's question