Popups with CSS Transitions

This sample adds and removes custom CSS classes to animate the Popup when it is shown or hidden. There are also fadeIn and fadeOut properties that can be used for simple animations on the Popup control.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let login = new input.Popup('#frmLogin', { fadeIn: false, shown: (sender) => { wijmo.toggleClass(sender.hostElement, 'custom-animation-visible', true); }, hiding: (sender) => { wijmo.toggleClass(sender.hostElement, 'custom-animation-visible', false); } }); // document.querySelector('#btnLogin').addEventListener('click', () => { login.show(true); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Popup CSS Transitions</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <button id="btnLogin" class="btn btn-primary"> Log In </button> <!-- Log In form --> <form id="frmLogin" class="custom-animation"> <h4 class="modal-header"> Log in <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> Email: <input class="form-control" required type="email" /> </label> <br /> <label> Password: <input class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." /> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> Log in </button> </div> </form> </div> </body> </html> .modal-body { min-width: 300px; } input:invalid { border-color: red; } /* CSS animations for fading in and out */ .custom-animation { opacity: 0; transform: rotate3d(1, .5, .5, 180deg) scale(0.1); transition: all ease-in .4s; } .custom-animation-visible { opacity: 1; transform: none; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { shown(popup: input.Popup) { wijmo.toggleClass(popup.hostElement, 'custom-animation-visible', true); } // hiding(popup: input.Popup) { wijmo.toggleClass(popup.hostElement, 'custom-animation-visible', false); } } // @NgModule({ imports: [WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Popup CSS Transitions</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <button class="btn btn-primary btn-space" (click)="frmLoginPopup.show(true)"> Log In </button> <!-- Log In form --> <wj-popup #frmLoginPopup class="custom-animation" [fadeIn]="false" (shown)="shown(frmLoginPopup)" (hiding)="hiding(frmLoginPopup)"> <form> <h4 class="modal-header"> Log in <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> Email: <input class="form-control" required type="email" /> </label> <br /> <label> Password: <input class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." /> </label> <br /> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> Log in </button> </div> </form> </wj-popup> </div> .modal-body { min-width: 300px; } input:invalid { border-color: red; } /* CSS animations for fading in and out */ .custom-animation { opacity: 0; transform: rotate3d(1, .5, .5, 180deg) scale(0.1); transition: all ease-in .4s; } .custom-animation-visible { opacity: 1; transform: none; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <button class="btn btn-primary btn-space" @click="frmLoginPopup.show(true)"> Log In </button> <!-- Log In form --> <wj-popup class="custom-animation" :fadeIn="false" :shown="shown" :hiding="hiding" :initialized="initPopup"> <form> <h4 class="modal-header"> Log in <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> Email: <input class="form-control" required type="email" /> </label> <br /> <label> Password: <input class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." /> </label> <br /> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> Log in </button> </div> </form> </wj-popup> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app', data: function(){ return { frmLoginPopup: null } }, methods: { initPopup: function(popup){ this.frmLoginPopup = popup; }, shown: function(popup) { wijmo.toggleClass(popup.hostElement, 'custom-animation-visible', true); }, hiding: function(popup) { wijmo.toggleClass(popup.hostElement, 'custom-animation-visible', false); } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .modal-body { min-width: 300px; } input:invalid { border-color: red; } /* CSS animations for fading in and out */ .custom-animation { opacity: 0; transform: rotate3d(1, .5, .5, 180deg) scale(0.1); transition: all ease-in .4s; } .custom-animation-visible { opacity: 1; transform: none; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Popup CSS Transitions</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wijmo from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; // class App extends React.Component { constructor(props) { super(props); this.initLoginForm = (popup) => { this.setState({ frmLoginPopup: popup }); }; this.shown = (popup) => { wijmo.toggleClass(popup.hostElement, 'custom-animation-visible', true); }; this.hiding = (popup) => { wijmo.toggleClass(popup.hostElement, 'custom-animation-visible', false); }; this.state = { frmLoginPopup: {} }; } render() { return <div className="container-fluid"> <button className="btn btn-primary btn-space" onClick={e => this.state.frmLoginPopup.show(true)}> Log In </button> <wjInput.Popup className="custom-animation" fadeIn={false} shown={this.shown} hiding={this.hiding} initialized={this.initLoginForm}> <form> <h4 className="modal-header"> Log in <button type="button" className="close wj-hide">&times;</button> </h4> <div className="modal-body"> <label> Email: <input className="form-control" required type="email"/> </label> <br /> <label> Password: <input className="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more."/> </label> <br /> </div> <div className="modal-footer"> <button className="btn btn-primary" type="submit"> Log in </button> </div> </form> </wjInput.Popup> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .modal-body { min-width: 300px; } input:invalid { border-color: red; } /* CSS animations for fading in and out */ .custom-animation { opacity: 0; transform: rotate3d(1, .5, .5, 180deg) scale(0.1); transition: all ease-in .4s; } .custom-animation-visible { opacity: 1; transform: none; } body { margin-bottom: 24pt; }