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.
Related
I have this code that shows contents outside of the ng-controller.
HTML
<div class="btn-group companyName">
<!-- buttons -->
</div>
<div class="col-lg-12 col-lg-md-12 col-sm-12" ng-controller="TopicsCtrl">
<div class="faq-breadcrumbs">
<!-- contents -->
</div>
</div>
JS
angular.module('sample').controller('TopicsCtrl', function ($scope) {
//how to hide first div?
};
The top div is inside the site's header, so it is shown in all pages of the site. The second div is only shown if I am in the FAQ page. Now I don't want the first div to show on the header whenever I am in the FAQ page. How can this be done? Can anyone help me? Thank you very much.
The angular way to do this would be to create a directive that manipulates the DOM and will hide the element on the page when the route is on the FAQ page. In order to do this you will have to increase the scope of your app to include the header.
If you can't do that, I would suggest just going the javascript/jquery way and hiding the companyName div when the location is at faq. Something like this could work.
$(document).ready(function() {
if(location.pathname == 'faq'){
$('.companyName').css('display', 'none');
}
}
This solution does pose the problem of potentially showing information before the document is completely loaded.
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.
I have an html fragment that is being loaded by the backend into the main div of my page. It contains a modal that appears when a link is clicked on. The issue is, is that the modal is able to be covered up by other elements on the page. Setting the z-index is useless, because if an element in the header has a higher z-index than the main div, the modal will show up behind the header, regardless of its z-index. I'm currently solving the problem by using javascript (jQuery) to clone the modal, appending the clone to the body, and then deleting the original modal. This seems like a hacky workaround and could cause potential problems, is there a better way to do this? How do modals usually get loaded so that they don't encounter this issue?
Here's a jsfiddle of the problem: http://jsfiddle.net/kraxF/
Here's the HTML, as you can see, the modal is pretty low in the DOM tree, and may be covered up by elements in the header or footer or main, if they have a higher z-index than "loaded-by-backend".
<div id="container">
<div id="header">
Header
</div>
<div id="main">
Main
<div id="loaded-by-backend">
<div id="modal">
Modal
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
If you can change CSS, just remove position:relative from #main.
http://jsfiddle.net/kraxF/3/
Be gentle I am new to this web dev game. I'm just trying to learn.
CODE:
<h4>Monday</h4>
<div id="first_accordian">
<h5>First Section</h5>
<div>
Some stuff.
</div>
<h5>Second Section</h5>
<div>
Some stuff.
</div>
</div>
<h4>Tuesday</h4>
<div id="second_accordian">
<h5>First Section</h5>
<div>
Some stuff.
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("[id$=_accordian]").accordion({ collapsible: true, active: false });
});
</script>
Obviously this is just a simplification of a partial view I have in and ASP.NET MVC3 app. But I am using jQuery UI and the accordion widget, so you will need to reference those for the code above to work.
QUESTION:
I have an issue here that when I expand an accordion element it will overlay any HTML underneath it. The behaviour I want is that I have a set of stacked accordions that all shift up or down when any element is selected in any of the accordions.
Does anyone know how I can do this with stacked accordions? Or thinking laterally. Is there any way I can add static headers that aren't accordion elements inline to the accordion (show above as the headers above each accordion; Monday, Tuesday)?
Is there are resizing event of something I should bind to? I'm at a loss as to where to start, any pointers welcome!
EDIT: Have just copied my own code into a file to check and experiment... and it works exactly how I need it to. But it doesn't in my app. So I'm guessing this must be down to something else going on outside of my code.
So... New question: What could stop something from resizing and creating this overlay problem?
bootstrap popover currrently expects this:
hover for popover
$("#example").popover({placement:'bottom'});
..expects you to define data-content in template or dynamically pass it in jquery.
Is there anyway it can support format like below:
..the point being able to define content/title in blocks
<div id="example">
<div class="original-title">
Twitter Bootstrap Popover
</div>
<div class="data-content">
It's so simple to create a tooltop for my website!
</div>
<a>hover for popover</a>
<div>
$("#example").popover({placement:'bottom'})
Currently, no, since the popover script is basically extending the functionally of the tooltip script, but nothing is impossible. You can modify the script and add custom data-attributes to support your markup yourself, but then when updates come around you will have to do it again if you want to support your edits, or not update at all.
I think that can be possible using a javascript code to give the content of this divs to the elements but is not recommended.
$("a").attr("data-title",$(".data-title").html()).attr(".data-content",$(".data-content").html());
$('a').popover({placement:'bottom'})