example.controller('AppCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('learn-modal.html', {
scope: $scope,
animation: 'fade-in-scale'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.myActiveSlide = 0;
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
});
/* Modal */
.ion-nifty-modal {
position: absolute;
width: 100% !important;
height: 50% !important;
top: 15%;
background-color: rgba(0, 0, 0, 0.5) ;
}
.modal-backdrop.active {
background-color: rgba(0, 0, 0, 0) !important;
}
<script id="learn-modal.html" type="text/ng-template">
<ion-modal-view class="ion-nifty-modal">
<div>
<ion-content>
<ion-slide-box>
<ion-slide>
<img src ="img/Episode/learn_more/ingredient/Text_ingredient.png" style = "width:50%; height:50%;">
</ion-slide>
<ion-slide>
<img src ="img/Episode/learn_more/location/Text_location.png" style = "width:50%; height:50%;">
</ion-slide>
</ion-slide-box>
</ion-content>
</div>
</ion-modal-view>
</script>
Hi,
I tried to make a slide box in modal on ionic.
But it doesn't work properly.
The modal window appears. But there is no images
and it is not applied animation effect.
That is my code.
How can I fix it?
Please help me guys.
Thank you.
Related
I have the following code that I load through Google Tag Manager, but the problem is that this demo loads a button at the bottom. I don't want that. Instead I want to load this on page load.
<style>/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Test message</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
I think I have to replace:
<button id="myBtn">Open Modal</button>
with something like:
<script>window.onload = function </script>
Could someone help me out? What do I need to complete the above line of code?
This is really easy: You need to replace
btn.onclick = function() {
modal.style.display = "block";
}
with
document.addEventListener('DOMContentLoaded', function() {
modal.style.display = "block";
})
or with
window.onload = function () {
modal.style.display = "block";
}
The first code will load the modal on DOM Ready and the second code will load the page on Window load.
I'm new to ionic and trying to create a simple modal. Its working fine but I'm not able to resize it, even though content part is getting resized using below css but b/g shade is still there. Can someone help me for the same?
ion-content.content {
top: 15%;
left: 15%;
width: 70%;
height: 70%;
}
My modal.html
<ion-content padding class="sample-modal-page no-scroll">
<h3 style="text-align:center"><strong>Are you sure you want to sign out?</strong></h3>
<button ion-button (click)="logout()">Logout</button>
<button ion-button (click)="closeModal()">Cancel</button>
</ion-content>
modal.ts
import { Component } from '#angular/core';
import { ViewController, NavController} from 'ionic-angular';
#Component({
selector: 'page-modal',
templateUrl: 'modal.html',
})
export class ModalPage {
constructor(public navCtrl: NavController,
public viewCtrl : ViewController) {
}
ionViewDidLoad() {
}
public closeModal() {
this.viewCtrl.dismiss();
}
public logout() {
}
}
in HTML
<ion-card-content>
<ion-content>
<h3 style="text-align:center"><strong>Are you sure you want to sign out?</strong></h3>
<button ion-button (click)="logout()">Logout</button>
<button ion-button (click)="closeModal()">Cancel</button>
</ion-content>
</ion-card-content>
in scss
page-modal{
ion-card-content {
padding: 0px !important;
height: 60% !important;
position: absolute;
top: 20%;
left: 18%;
display: block;
width: 65%; // here change your width
height: 65%!important; // here change your width
overflow: hidden;
ion-content {
height: 100%;
width: 100%;
}
}
}
Demo here: http://jsfiddle.net/z2mw3k0a/1/
It works fine on desktop. However, when I use iphone to test Addthis button. The share window will pop up and then hide immediately.
I debugged on safari, and can't figure out the problem,
I just found, for #at4m-menu element, there has a style
.at4-show {
display: block!important;
}
When you unchecked this style on safari inspect element tool and check it again, the pop up window will show.
Any help are appreciated.
This problem is fixed by addthis.
Find the problem related with slideInUp animation.
#-webkit-keyframes slideInUp {
0% {
-webkit-transform: translateY(1500px)
}
0%,
to {
opacity: 1
}
to {
-webkit-transform: translateY(0)
}
}
#keyframes slideInUp {
0% {
transform: translateY(1500px)
}
0%,
to {
opacity: 1
}
to {
transform: translateY(0)
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.red{
position: fixed;
background: #ff0000;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 14px;
font-weight: 300;
display: block;
width: 200px;
height: 200px;
opacity: 0;
}
<div class="red slideInUp"></div>
It works fine in chrome, but not in safari.
Logo bere: San-Francisco-Family-Photographer.com
On the iphone, the image won't center.
.header-image #header #title-area {
background: url("http://www.san-francisco-family-photographer.com/wp-content/uploads/2013/04/Joey-Chandler-Photographer-square.png") no-repeat scroll center center transparent;
background-position: center;
height: 130px!important;
width: 180px!important;
}
.header-image #title-area, .header-image #title, .header-image #title a {
display: block;
margin-left: auto;
margin-right: auto;
}
Thanks.
You could place it in a div and center it.
div#image {
background: #282;
width:130px;
height:130px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
I am having a rough time with responsive design on this one site. Don't know what is happening, and my code has kind of turned to crap as a result, this is a modified zurb foundation grid, however the client wanted left navigation. Once the design drops to an iphone for some reason the width of the top elements (logo, menu) has some margin, padding or is only approx 80% width. See http://eseamedia.com/lm
#media only screen and (max-width: 767px) {
.menu {
background: none;
padding: 0;
margin: 0;
height: auto;
max-width: 100%;
min-width: 100%;
position: relative;
display: table;
float: none; }
.menu nav {
height: auto;
margin :0 auto 26px auto;
width: 100% }
.menu ul li a {
margin: 0 auto;
width: 100%;
display: block;
text-align:center; }
.logo {
background-position: center center;
background-color: transparent;
margin 0;
height: 104px;
width: 321px;
padding: 0 }
.info {
position:relative }
.headline{
margin:0;
position:relative;
padding:0;}
.context, .wrap {
margin:0;
left:0;}
}
use meta tag
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />