I'm using vue and foundation 6.2.3 to create a modal:
<div :id="modalId" class="reveal" data-reveal v-foundation-element aria-labelledby="modal button" aria-hidden="true"
role="dialog" :data-options="allowEscape ? 'closeOnClick:true;closeOnEsc:true;' : 'closeOnClick:false;closeOnEsc:false;'">
When I click the button the modal shows up, but I can click outside the modal body and press escape to close the modal despite closeOnClick:false and closeOnEsc:false being set.
Here's the twist: I'm using hot reload with webpack and I can do a weird thing to make it start working.
I remove v-foundation-element from the div
I save and reload the page.
I add v-foundation-element back to the div
the page gets hot reloaded
I can no longer click/esc out of the modal
here's the rendered HTML for the modal when it's in the working state:
<div id="choose-your-package" data-reveal="ianmsm-reveal" aria-labelledby="Choose Your Package" aria-hidden="false" role="dialog" data-options="closeOnClick:false;closeOnEsc:false;" class="reveal" data-yeti-box="choose-your-package" data-resize="choose-your-package" tabindex="-1" style="display: block; top: 129px;">
and here's the modal in the non-working state:
<div id="choose-your-package" data-reveal="axb8cp-reveal" aria-labelledby="Choose Your Package" aria-hidden="false" role="dialog" data-options="closeOnClick:false;closeOnEsc:false;" class="reveal" data-yeti-box="choose-your-package" data-resize="choose-your-package" data-events="resize" style="top: 129px; display: block;" tabindex="-1">
I'm not sure why this is happening. How do I make it work consistently?
I think maybe you are trying to use the JSON options in the data attribute, which, as far as I know isn’t possible.
Try setting data-close-on-esc="false" and data-close-on-click= "false". Maybe the plugin you have has the JS options allowed in data options, but I doubt it.
Related
I have a modal window (using bootstrap), with a close button. The modal window opens and closes fine in most browsers. However, in internet explorer, there is a problem. We can open the modal window fine, and close it fine ... but if we try to open it again, it wont.
Most of the javascript functionality is in bootstrap. Below is the html for the open button [I believe data-toggle="modal" and data-target="#exampleModal" are the key to opening the window]...
Get The Demo
...and the html for the start of the modal window, with the close button [note the id="exampleModal" tells which window to open. And the data-dismiss tells to close "modal"...
<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="padding-right: 17px; display: block;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- CLOSE BUTTON -->
<div class="row at-modal-close-box">
<a href="#" data-dismiss="modal" aria-label="Close">
<img src="https://www.amazingdg.com/_dev/temp/images/modal-close-btn.svg" alt="Close Demo Form">
</a>
</div>
...
You can view the page here:
https://www.amazingdg.com/_dev/temp/
Note: When I click the open button a second time, there is an error in IE's console ... Object.keys: argument is not an Object. Note: this error doesn't occur the first time opening the modal window. Not sure how to fix it...
---------------------------------------------------
I tried to remove the fade class ... that made the modal window show ALL of the hidden elements in the form (required fields, successfully sent message, etc.)
if ($.browser.msie) {
$("#exampleModal").removeClass("fade");
}
---------------------------------------------------
I tried to change the fade transition (not supported by IE) using an IE media query. This removed the fade, but didn't fix the issue.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */
.fade {
transition:none !important;
}
}
I had a similar issue on IE, and it was solved by doing the following:
Whenever you open the modal, using:
modal.element.modal();
Send in an empty object, like this:
modal.element.modal({});
This fixed the issue for me in IE (without the need to mess with the fade classes) and didn't change the behavior in other browsers!
Remove fade class which does not work in IE
if ($.browser.msie) {
$("#exampleModal").removeClass("fade");
}
I was facing the same issue that got a very simple fix.
You can simply toggle the modal using jQuery in the function that you call:
$("classnameORidName'").modal("show");
I'm trying to use the reveal modal of Foundation.
I already succeed with just the use of a basic modal.
As I'm just starting on the project (which use symfony2 and foundation),
I have some difficulties.I dont really understand how foundation work.
So what i need to do :
Make the reveal modal open after a few second (10 for now) with a fade in-out animation without the grey background around it. By the way, the fade in-out function happens only after the first appearance of the modal, I dont understand why so ?
I tried to search how to do this but no topic about this were found( maybe i'm just bad at searching).
Thanks for any answer ! :D
PS: sorry for the grammar fault, not my native language.
For any precision just ask !
Here is a copy of the modal i'm using :
<p>Click Me For A Modal</p>
<div id="myModal" data-overlay="false" class="reveal-modal"
data-animate="fade-in fade-out" data-reveal aria-labelledby="modalTitle"
aria-hidden="true" role="dialog">
<h2 id="modalTitle">Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
first, fire the modal on page load using Foundation callback (hat tip to this Foundation forum post and codepen code):
$(document).ready(function(){
setTimeout(
function()
{
//do something special
$('#myModal').foundation('reveal', 'open')
}, 10000);
});
Then you need to display: none the reveal background overlay like so:
.reveal-modal-bg { display: none; }
After updating an existing Ionic project from 1.13-beta to 1.14-beta I've experienced some behaviour I can't explain. When changing from one viewstate to another, the old view doesn't leave the page. Upon logging both angular ui router events and Ionic navigation events I've noticed Ionic's Exit Events aren't fired:
$ionicView.leave
$ionicView.beforeLeave
$ionicView.afterLeave
Documentation: (http://ionicframework.com/blog/navigating-the-changes/)
Has anyone else experienced similar behaviour? If so, have you found any way to resolve this?
Events Fired:
$stateChangeStart: App.LoadApp.Input -> App.Main.QrToken
$viewContentLoading: Main
$viewContentLoading: QrToken
$stateChangeSuccess: App.LoadApp.Input -> App.Main.QrToken
$ionicView.beforeEnter
$ionicView.afterEnter
$ionicView.enter
I can load in the QrToken view if I Don't nest it inside Main, so I believe the problem lie there. Can anyone take a look at my Main Template and help me find a solution.
<div ng-controller="fbMenuController">
<ion-side-menus>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content scroll="true">
<div ng-repeat="Group in fb.Model.MenuGroups">
<ion-item class="item-divider">{{Group.Name}}</ion-item>
<!-- href="#/Main/{{Page.Name}}" -->
<a ng-repeat="Page in Group.Items" nav-transition="android" nav-direction="swap" class="item" ng-click="fb.SelectPage(Page.State)">
{{ Page.Name }}
</a>
</div>
</ion-content>
</ion-side-menu>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark" ng-show="fb.Model.ShowHeader">
<div class="buttons">
<button class="button-icon icon ion-navicon" ng-click="fb.ToggleLeftMenu()"></button>
</div>
<h1 class="title">{{ fb.Model.ActivePage.Name }}</h1>
</ion-header-bar>
<ion-content scroll="true">
<ion-nav-view name="Main">
</ion-nav-view>
</ion-content>
</ion-side-menu-content>
</ion-side-menus>
</div>
If your view is wrapped in a tab using <ion-tab>, you need to register for $ionicNavView-Events:
$scope.$on("$ionicNavView.leave")
This is an open issue https://github.com/driftyco/ionic/issues/2869 and probably occurs when view-cache="false".
On my case $ionicView.leave worked in nested views but not when moving between tabs nor did $ionicParentView.leave so I came around it with another solution.
Solution:
On MAIN controller I added:
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (fromState.name === 'name-of-leaving-state') {
//your code here, similar behavior with .$on('$ionicView.leave')
}
});
Hope it helps
I had this problem the other day. I was listening for the event on my child controllers. When I moved the listener to the parent, it worked. I wasn't quite sure why, but now I think I know why. It's because of the way Ionic caches the views. Specifically this line from the docs:
If a view leaves but is cached, then this event will not fire again on
a subsequent viewing.
It's likely that your views were cached before you added the listener and the leave event never fired. But since your parent is... well... the parent, its leave event is triggered any time you leave any of its children. I haven't officially tested this, it's just a hunch. To test, try telling ionic to not cache the view by adding cache-view="false" to your ion-view declaration.
See docs here.
Found the problem. The 'Main' state was defined without the attribute
abstract: true
this worked in Ionic 1.13-beta but Aparently breaks in Ionic 1.14-beta. Didn't find this change in any of the migration posts on either Ionic, AngularJS or Angular-ui-router, so I don't know why this solved it. If anyone can elaborate more on the behavior in this situation, I'd be grateful but for now I have a solution.
I know this is quite old, however i wanted to add that on Ionic v1.3.4 (the last version) the $ionicView.beforeEnter && $ionicView.afterEnter all work. I mention this because others have commented that v1.3.x was having issues with controller views for .beforeEnter and .afterEnter. But I don’t ever recall having issues on any version of 1.3.x.
That being said, I came to this thread because I am updating an older ionic v1 app and ran into a problem where the $ionicView.beforeEnter was not firing and I could not figure out why. It turns out the template that goes with that controller was missing closing HTML tags on a few <i class="icon> elements…I didn’t add the closing </i>
Thus, apparently, certain elements missing a closing tag was preventing the controller $ionicView.beforeEnter/afterEnter functions from firing. Don't know if its all tags or specific tags but I can say I had NEVER seen that before so it took me a while to figure out the issue was in my template and not in my controller.
For what its worth, hope my discovery helps those in the future.
I've got weird problem. I'm trying to add Facebook Like Button on my website, but it doesn't show up in Internet Explorer and Firefox. Yes, I've already added this:
<html xmlns:fb="http://ogp.me/ns/fb#">
and FB-Root and JS SDK. Whenever I'm trying to add XFBML or HTML5 version, it always doesn't show up in IE and Firefox. In Chrome and Safari it works well.
However, when I leave cursor on the button that is displaying div that contains FB like box over the mouse hover, it will display properly. Also, when I put this like button in any other place on my site, it will show up.
Here's the code:
<li id="menu-item-21" class="ikonka menu-item menu-item-type-custom menu-item-object-custom menu-item-21">
<a href="#"><span class="fb ikoneczka"></span>
<div class="box_pop">
<p>Text</p><hr/>
<div class="fb-like" data-href="http://facebook.com/facebook" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
</div>
</a>
</li>
It looks like Firefox and IE are rendering this box at the start of loading the page. However, they leave space for them. It's weird.
I wish you could help me. Thanks in advance.
OK, so I found solution for this problem.
Firstly, I've clear up all z-index in my css file and set z-index: 8; for .box_pop.
Secondly, set .ikonka div to display: none; and leave .ikonka:hover div with nothing (you can just don't put this in css).
Thirdly, I've set up some jQuery:
<script>
$(document).ready(function() {
$('#your-li-id').hover(function() {
$(this).addClass('pretty-hover');
}, function() {
$(this).removeClass('pretty-hover');
});
});
</script>
Note: where is #your-li-id you must put here id of your li element. This script will add pretty-hover class to your li. Then, in CSS, put this:
.pretty-hover div{
display: block;
}
It should work now.
As you can see, you mustn't set display: none; into your CSS and then - also via CSS - just add display: block; on hover.
If you will do that, iFrame won't be visible in IE or even FF. You must do this trick with jQuery.
I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.
I'm using the form navbar-search. I want to have an "advanced search" modal that opens from a link within the navbar.
If I put the modal div within my tag in the navbar, when the modal opens it is behind the darkened area that is normally outside of the modal window. Clicking anywhere closes the modal and the darkened mask.
I can fix this by moving the modal div outside of the navbar (and, thus, outside of my form) but then it breaks my form functionality. The advanced search modal is supposed to function as an extension of the form field directly in the navbar but if I use two different forms to fix the modal problem, the forms don't work together any longer. Does that make sense?
If I enclose the entire nav bar plus my modal (which is outside the navbar) in a tag, it works but screws up some of the navbar formatting so I'm thinking this is not a very clean solution.
So, I either need to a way to fix the modal display issue or a way to make my form situation work properly (as in, linking two forms together without having a ton of duplicate markup for hidden fields and the like).
Thanks for any ideas!
Matt
Here is what I have now (which I've gone ahead and just adjusted css afterward to make things line up). I don't think it is semantically correct according to how bootstrap's navbar is supposed to be used, but my form is working correctly and that is a big deal to me. :)
<form>
<navbar></navbar>
<modal></modal>
</form>
I am a little unsure what you are asking, but this is a stab at what I think you are asking. The modal does not actually need to put the code for the modal in the form itself. The only thing you need in the navbar is the link and trigger activating the modal.
<form>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Advanced Search</li>
</ul>
</div>
</div>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Advanced Search</h3>
</div>
<div class="modal-body">
<p>Put your search fields here. </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Search</button>
</div>
</div>
See working link.
http://jsbin.com/ifaqaj/1/edit