So, after looking at many jquery modal plugins, I like the PopEasy ( http://thomasgrauer.com/popeasy/ ), but I copy and paste the provided code into a page on my server and no-workey.
Do the same with jsFiddle, same problem. The overlay fires, but the modal doesn't pop up. I'm sure that I'm doing one simple thing wrong.
http://jsfiddle.net/birchy/Kkw2L/5/
<a class="modalLink" href="#">Click Me
<div class="overlay"></div>
<div class="modal">
Close Me
content here
</div>
It appears to be a missing anchor close tag in the author's code.
Related
I've noted that whenever I create a Foundation 6 Reveal Modal the actual HTML is placed at the bottom/end of the document regardless of where the actual reveal modal is placed in my HTML code.
Although this is fine most of the time I've ran into an edge case where I need to place a form partial inside a modal. The issue is that the modal is placed outside the form_tag as the Foundation Javascript moves it to the end of the HTML document. I've been able to work around it but it makes my code much more complicated than it needs to be.
Is there any easy fix to change where the foundation modal is placed in the HTML document? Is there any particular reason that modals are placed at the end of the HTML document? Unfortunately I could not find anything on the docs, Foundation forums or SO.
Example psuedocode:
<div id="first-div">
<div class="reveal" id="modal" data-reveal></div>
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
Output in browser is:
<div id="first-div">
<!-- this is empty now -->
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
<!-- reveal modal is moved to end of HTML document -->
<div class="reveal-overlay">
<div class="reveal" id="modal" data-reveal></div>
</div>
Edit:
Attached a Codepen noting the output issue. The modal opens and closes as exected but when inspecting the output HTML the reveal modal is moved to the end of the HTML document - it's actually below the tags at the bottom.
https://codepen.io/matt_hen/pen/RZZBQM
You need to specify where your modal needs to pop up. I forked your codepen
$('#first-div').foundation('reveal', 'open');
https://codepen.io/titse/pen/ayygrW
Let me know if you need more help
This works on Foundation 6:
You need to override the Foundation default appendTo variable for Reveal. That can be done the following ways:
Add a data-append-to="div#first-div" tag on the Reveal div to specify the parent element for the Reveal modal and, if applicable, overlay divs. This allows you to change the parent element individually for each Reveal modal.
Source: Foundation Documentation
Change the default value for the Reveal module globally by specifying the override default value when you initialize Foundation with Foundation.Reveal.defaults.appendTo = "div#first-div"
Source: Foundation Docs
In my testing, setting the parent to a smaller div inside the body element did not adversely affect the positioning of the modal or the display of the background overlay.
Specifying the parent in the call (e.g. $('#myDiv').foundation('reveal','open); does not work in the current release of Foundation.
I need help with twitter's bootstrap accordion. I need it to where when i click the accordion title, the title opens up something i href it to.
<div class="container">
<p class="max-width-700 lead">testing</p>
<div class="col-md-6 col-sm-6 mb-sm-30">
<div class="accordion">
<div class="accordion-title">
2014 (Opening)
</div>
<div class="accordion-title">
2015
</div>
<div class="accordion-content">
</div>
Something like this, so when i click 2014, it opens up a document or file i have linked it to
You need to open file inside the accordion tab or need open file only like open pdf file an other window ?
In bootstrap you can't open link until you remove its according function
(1)
Use a boostrap-collapse.js event. See http://getbootstrap.com/2.3.2/javascript.html#collapse
Give each title a unique id and then add the following js to the end of your HTML.
$('#myItem1').on('show', function () {
window.location.href = '1.0.pdf';
})
(2)
The accordion is specifically designed to open an underlying hidden content. Using it to open external files is not expected behaviour - I would strongly recommend not using this type of UX - some users will see this as clickbait.
(3)
The .accordion class comes from Boostrap 2(?) 2 is no longer supported.
This is my first time using the jQUery Mobile popups. I've found documentation here and here. How I'm looking to create the following:
Now according to the doc's, the following code should work:
Open Popup
<div data-role="popup" id="popupBasic" data-dismissible="false">
<p>This is a completely basic popup, no options set.<p>
</div>
But given the code above I still keep getting the stock standard popup:
Any idea what I am doing wrong?
data-dismissible means whether you want the popup to close once clicked outside it. The default value is true, if you set it to false, you have to add a button with data-rel="back" to close it, jQM wont add a close button dynamically/automatically.
Change your markup to the following.
<div data-role="popup" id="popupBasic" data-dismissible="false" data-theme="c" data-overlay-theme="a">
<p>Click button to close this.</p>
Close
</div>
Note that data-theme and data-overlay-theme are different, the latter changes the color of the popup's overlay.
Or, you can close it programmatically.
$("#popupBasic").popup("close");
Demo
I'm pretty sure this is another DOH! facepalm questions but as designer and not a programmer I need some help getting it right.
What I have is an index file calling local .html files via jQuery .load. Just like this:
(some tabs functionality not relative here - thus the link target call)
Lightbox</li>
<div id=lightbox">
<div class="load">
<script type="text/javascript">
$('.load').load('examples/lightbox.html');
</script>
</div>
</div>
I also have an external .js file that has a bunch of functions that handles some lightboxes among other things. Standard <script src="js/typography.js" type="text/javascript"></script>
Which contains:
$(document).ready(function(){
$(".open-lightbox").on("click", function(){
$('.lightbox').css('display','block');
});
$('.close-lightbox').click(function(){
$('.lightbox').css('display','none');
});
});
My problem is that if the externally called .html file has any elements dependent on the .js file ie. the lightbox popup it doesn't work.
something like :
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
If i move the html code right to the index page instead of the .load, no problem, same if I moved the JS as an inline <script>...</script> rather than calling it extrenally. Works fine in both cases.
My spidey sense tells me this has something to do with my function and .load not executing in the order I need them to, but my javascript copy/paste skills only go this far.
Can anyone tell me if I can make this combination work? I'd really appreciate it.
EDIT
Maybe I explained my self poorly so let me try and post a better example.
If my index code is as followed everything works: My lightbox pops up as intended.
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
</div>
<--End Tab Content-->
</div>
When the said tab is clicked the content inside "thistabid" show up. Whatever that content may be.
Now if i do :
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
<script type="text/javascript">
$('.somehtmlpage-load').load('examples/lightbox.html');
</script>
</div>
<--End Tab Content-->
</div>
The lightbox doesn't work. The content of lightbox.html is
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
Same as the html in the 1st example where everything works. The only difference it's being jQuery loaded rather than hard coded.
What I mean by "if the externally called .html file has any elements dependent on the .js file ie. the lightbox popup" is that if the html is part of the externally called file then the lightbox function isn't working. If it's hard coded it pops up like intended.
On 1st glance the .on seems like should be the solution but most likley my implementation of it is off the mark :/
The 'on' or the 'live' function needs to be applied through an element that exists on the page. Generally some parent of the actual element is used. Can you try something on the following lines with the correct references to the elements on your page:
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
<!--leave tab empty for now -->
</div>
<--End Tab Content-->
</div>
<script>
(function(){
$('.somehtmlpage-load').load('examples/lightbox.html');
//live or on needs to be applied to an element that exists on th page
$('#thistabid').on('click', '.open-lightbox', function(){
$('.lightbox').css('display','block');
});
$('#thistabid').on('click', '.close-lightbox', function(){
$('.lightbox').css('display','none');
});
})();
</script>
There seems to be a race condition between your load() and document ready.
To address this you'll need to:
either wait for the load() to complete before you attach the click events
or attach the click to the container of your load() step and use event delegation.
See this page and this other one for more information on how to use on() for delegation.
The code would look like this:
$(".somehtmlpage-load").on("click", ".open-lightbox", function(){
$('.lightbox').css('display','block');
});
Using a SSI solved my problem. I was trying to keep it all Local Drive friendly but it seemed to be causing more problems than anticipated.
Pick your favorite dev environment...I didn't run into any conflicts on either.
ASP - <!--#include file = "examples/lightbox.html" -->
PHP - <?php include 'examples/lightbox.html';?>
Just in case someone else runs into a similar problem.
The Twitter Bootstrap library now has Javascript plugins available, and one of them is supposed to give your alerts an automatic close button.
The documentation is here
I can't figure out how to get it to work. See this code and fiddle:
<div class = "alert-message fade in" data-alert = "alert">
<p>This is an alert!</p>
</div>
http://jsfiddle.net/SBQcp/
I'm sure there's a syntax piece that I'm missing, but I don't get it.
Alerts are not supposed to be auto-closed because the intention is to the user to notice any message before closing.
Although you can add a link so the user can close it manually this way.
<div class = "alert-message fade in" data-alert = "alert">
<a class="close" href="#">×</a>
<p>This is an alert!</p>
</div>
Or can be closed programatically this way:
$(".alert-message").alert('close')