How do you Reveal a modal programmatically in Foundation 4?
In Foundation 3 we had the easy to use reveal() method.
What can you use in Foundation 4? Please help.
I am pretty sure you can simply use the .foundation method on your modal to call 'open' on it.. Something like:
$('#myModal').foundation('reveal', 'open');
e: Just checked the docs and yep, It's right there: http://foundation.zurb.com/docs/components/reveal.html
Look for "You can also open and close Reveal via JavaScript:"
Unfortunately, in Foundation 4 you must have this trigger link to open a modal =/ Unfortunately not because you'll have to write a lot more code (thats not true), but because this implementation isnt, let's say, pretty.
My code for the modal:
<!-- MODAL BOX START CONFIGURATION -->
<a class="reveal-link" data-reveal-id="modal"></a>
<div id="modal" class="reveal-modal medium">
<div id="modalContent"></div>
<a class="close-reveal-modal">×</a>
</div>
JS function to open and put some content into the modal
function openModal(url,params,text){
// If #url is not empty then we change the #modalContent value with the #url value
if(url !== '')
{
ajaxLoad('#modalContent',url,params);
}
// If #text is not empty then we change the #modalContent value with the #text value
else if(text !== '')
{
$('#modalContent').html(text);
}
// If both #url and #text are empty, then the #modalContent remains unchanged.
// Now we just show de modal with the changed (or not) content
$('a.reveal-link').trigger('click'); }
Hope it helps!
For programmatic (javascript) access the docs seem to only suggest launching via click event.
Add your Modal:
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
Set the trigger:
Click Me For A Modal
Activate trigger programmatically:
$('#my-trigger').trigger('click');
Admittedly it does seem like a work-around, maybe this is due to their heightened "lightweight/mobile-first" focus. Lets see what the next release brings.
$("#myModal").foundation('reveal', 'open');
Related
I would liketo trigger a modal dynamically via typescript. I know this should be easy, so I'm probably looking over something.
Somewhere in Template:
<ng-template #adminmodal>.....Some content right here......</ng-template>
Component:
Trying to make a TemplateRef from the #adminmodal
#ViewChild('adminmodal', { read: TemplateRef }) _adminModalRef: TemplateRef<any>;
Trying to trigger and failing miserably
this.modalRef = this.modalService.show(this._adminModalRef);
It opens a modal, but with an empty modal-content, so there is something wrong with my approach.
Your approach should work, maybe there is a bug inside ngx-boostrap (https://github.com/valor-software/ngx-bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+modal)
Another way according to the docs you could try is via the modalDirective
Template
<div class="modal fade" bsModal #modal="bs-modal">...</div>
Typescript
#ViewChild(ModalDirective) modal: ModalDirective;
showModal() {
this.modal.show();
}
Hope this helps you out, good luck!
<div draggable="true">
{{input value="default value" }}
</div>
In ember.js, as above code, when the div element has an attribute 'draggable="true"', on the webpage, the input area must need a double-click to edit in ie-11, but in chrome or firefox, it just need a click event to edit. Has anyone resolved this issue?
seems to be a bug
[IE 11] Input field of type text does not respond to mouse clicks when ancestor node has draggable=true
bad workaround:
<div style="background-color:lightgray" id="dragE" draggable="true">
<input id="inputE" type="text" />
</div>
click on the lightgray background
now the input field support single click
$('#dragE').focus(); <br>
$('#inputE').focus();<br>
was my solution
unfotunately reproducing with pluncer & co. did not work.
Or...set attribute draggable to "false", when the page goes to a production environment.
This worked for us.
I would like to use turbolinks in a rails 4 application but not have it replace the entire <body> tag. Instead I would like to specify a tag/selector for turbolinks to refresh.
Something like...
<body>
<div class="turbolinks-refreshes-this">
Some content that is replaced whenever a link is clicked.
</div>
<div class="turblinks-does-not-refresh-this">
Some content that remains even if a link is clicked.
</div>
</body>
My guess is you would need to fork turbolinks to add this functionality but thought I'd throw it out there to see if anyone else has tried to do this.
Have you looked at pjax? It's very similar to Turbolinks (and gets a mention in the Turbolinks README) but lets you specify a target container. Here's a Railscast that shows how to use it in a Rails app.
Here's a (slightly modified) excerpt from the pjax README:
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to next page.
</div>
We want pjax to grab the url /page/2 then replace #pjax-container
with whatever it gets back. No styles or scripts will be reloaded and
even the h1 can stay the same - we just want to change the
#pjax-container element.
We do this by telling pjax to listen on a tags and use
#pjax-container as the target container:
$(document).pjax('a', '#pjax-container')
Now when someone in a pjax-compatible browser clicks "next page" the
content of #pjax-container will be replaced with the body of
/page/2.
I use the following code to display a youtube video inside a reveal-box
<a href='#' data-reveal-id='myModal1'><img alt="Some text" src="images/logo.png" class="large-6 medium-6 small-6 columns" /></a>
<div id="myModal1" class="reveal-modal small" data-reveal>
<div class='flex-video'>
<iframe src="http://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" class='no-border' allowfullscreen></iframe>
</div>
<a class="close-reveal-modal">×</a>
</div>
but this works only once...
When I open the box, it shows the video perfectly, but when I close it, and re-open it, I only get a white area.
It seems like the flex-video is the problem; when I remove this div, so I put the iframe directly into the reveal-modal div, it works normally, but then obviously the video doesn't scale on different devices
It always worked fine in foundation 4, but now in foundation 5 it does this.
Please help.
Thank you
Give your reveal modal an ID (i.e. #myModal)
Go into your foundation.reveal.js file and look for the line of code that reads:
close_video : function (e) {
var video = $(this).find('.flex-video'),
iframe = video.find('#myModal iframe');
As you can see, in the third line of code I have added the id of #myModal
Open foundation.min.js and find (command+f) the two iframe references, and add your ID (#myModal) to both
I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
The first problem i am facing is:
using this code
function AngularUI($scope, $window) {
$scope.collapse = function (selector) {
angular.element(selector).collapse();
}
}
and
<div class="ang-ui-test">
<button ng-click="collapse('#collapsible')">
using angular.element
</button>
<div id="collapsible" class="collapse">
some thing in here ...... !
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">This one work properly</div>
</div>
the second one that does not uses angular.element.collapse works properly.
The second problem is : how do I test the behavior mentioned above.
on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown.
( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
thanks in advance.
You're doing it wrong. It's bad juju to do DOM manipulations in the controller because you are trying to look for / manipulate the DOM before it had a chance to render/refresh/update. Think of all the JS in the controller being executed in it's own phase, and THEN all the HTML is updated to reflect the final model state.
Try using ng-class="{collapse:someBoolExpression}"
You could also take a look at ui-hide, ui-show and ui-toggle (from AngularUI, but I think we should probably add a ticket to let you customize the class used.
Try to get the mindset of doing DOM manipulation manually out of your head. It takes a while, but once you get used to it your development speed picks up exponentially. When you finally hit a wall where Angular can't already do the job for you, start reading up on directives and checkout AngularUI's source code for some good, commented examples.