Popups with Owner Elements

This sample demonstrates how the Popup control works when the Popup has and owner element. The showTrigger and hideTrigger properties are used to control the Popup behavior when the owner element is clicked or the Popup loses focus; Click,Blur, or None.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let popClickBlur = new input.Popup('#popClickBlur', { owner: document.getElementById('btnClickBlur'), showTrigger: 'Click', hideTrigger: 'Blur' }); // let popClickClick = new input.Popup('#popClickClick', { owner: document.getElementById('btnClickClick'), showTrigger: 'Click', hideTrigger: 'Click' }); // var popClickNone = new input.Popup('#popClickNone', { owner: document.getElementById('btnClickNone'), showTrigger: 'Click', hideTrigger: 'None' }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Popups with Owner Elements</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"> <h4>Show on Click, Hide on Blur</h4> <button id="btnClickBlur" class="btn btn-primary"> Show the Popover </button> <div id="popClickBlur" class="popover"> <h3 class="popover-title"> Title </h3> <div class="popover-content"> Hello Popup<br /> This is a multi-line message! This is a long line in my popover, which uses Bootstrap's 'popover-content' style. </div> </div> <hr /> <h4>Show on Click, Hide on Click</h4> <button id="btnClickClick" class="btn btn-primary"> Show the Popover </button> <div id="popClickClick" class="popover"> <h3 class="popover-title"> Title </h3> <div class="popover-content"> Hello Popup<br /> This is a multi-line message! This is a long line in my popover, which uses Boostrap's 'popover-content' style. </div> </div> <hr /> <h4>Show on Click, Hide with Code</h4> <button id="btnClickNone" class="btn btn-primary"> Show the Popover </button> <div id="popClickNone" class="popover"> <h3 class="popover-title"> Title </h3> <div class="popover-content"> <form name="popoverForm"> <p> Hello Popup<br /> This is a multi-line message!</p> <pre>2 + 3 = <span class="">5</span></pre> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-actions"> <button class="btn btn-danger wj-hide">Close</button> <button class="btn btn-primary wj-hide-ok">Save changes</button> </div> </form> </div> </div> </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 { 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 { } // @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 Popups with Owner Elements</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"> <h4>Show on Click, Hide on Blur</h4> <button #btnClickBlur class="btn btn-primary"> Show the Popover </button> <wj-popup [owner]="btnClickBlur" [showTrigger]="'Click'" [hideTrigger]="'Blur'" class="popover"> <h3 class="popover-title"> Title </h3> <div class="popover-content"> Hello Popup<br /> This is a multi-line message! This is a long line in my popover, which uses Bootstrap's 'popover-content' style. </div> </wj-popup> <hr /> <h4>Show on Click, Hide on Click</h4> <button #btnClickClick class="btn btn-primary"> Show the Popover </button> <wj-popup [owner]="btnClickClick" [showTrigger]="'Click'" [hideTrigger]="'Click'" class="popover"> <h3 class="popover-title"> Title </h3> <div class="popover-content"> Hello Popup<br /> This is a multi-line message! This is a long line in my popover, which uses Boostrap's 'popover-content' style. </div> </wj-popup> <hr /> <h4>Show on Click, Hide with Code</h4> <button #btnClickNone class="btn btn-primary"> Show the Popover </button> <wj-popup [owner]="btnClickNone" [showTrigger]="'Click'" [hideTrigger]="'None'" class="popover"> <h3 class="popover-title"> Title </h3> <div class="popover-content"> <form name="popoverForm"> <p> Hello Popup<br /> This is a multi-line message!</p> <pre>2 + 3 = <span class="">5</span></pre> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-actions"> <button class="btn btn-danger wj-hide">Close</button> <button class="btn btn-primary wj-hide-ok">Save changes</button> </div> </form> </div> </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"> <h4>Show on Click, Hide on Blur</h4> <button class="btn btn-primary" ref="btnClickBlur"> Show the Popover </button> <wj-popup :owner="btnClickBlur" :showTrigger="'Click'" :hideTrigger="'Blur'" class="popover"> <h3 class="popover-title"> Title </h3> <div class="popover-content"> Hello Popup<br /> This is a multi-line message! This is a long line in my popover, which uses Bootstrap's 'popover-content' style. </div> </wj-popup> <hr /> <h4>Show on Click, Hide on Click</h4> <button class="btn btn-primary" ref="btnClickClick" > Show the Popover </button> <wj-popup :owner="btnClickClick" :showTrigger="'Click'" :hideTrigger="'Click'" class="popover"> <h3 class="popover-title"> Title </h3> <div class="popover-content"> Hello Popup<br /> This is a multi-line message! This is a long line in my popover, which uses Boostrap's 'popover-content' style. </div> </wj-popup> <hr /> <h4>Show on Click, Hide with Code</h4> <button class="btn btn-primary" ref="btnClickNone" > Show the Popover </button> <wj-popup :owner="btnClickNone" :showTrigger="'Click'" :hideTrigger="'None'" class="popover"> <h3 class="popover-title"> Title </h3> <div class="popover-content"> <form name="popoverForm"> <p> Hello Popup<br /> This is a multi-line message!</p> <pre>2 + 3 = <span class="">5</span></pre> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-actions"> <button class="btn btn-danger wj-hide">Close</button> <button class="btn btn-primary wj-hide-ok">Save changes</button> </div> </form> </div> </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 { btnClickBlur: null, btnClickClick: null, btnClickNone: null } }, mounted: function(){ this.btnClickBlur = this.$refs.btnClickBlur; this.btnClickClick = this.$refs.btnClickClick; this.btnClickNone = this.$refs.btnClickNone; } }) 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 Popups with Owner Elements</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 wjInput from '@grapecity/wijmo.react.input'; // class App extends React.Component { constructor() { super(...arguments); this.initClickBlurPopup = (popup) => { popup.owner = this.refs.btnClickBlur; }; this.initClickClickPopup = (popup) => { popup.owner = this.refs.btnClickClick; }; this.initClickNonePopup = (popup) => { popup.owner = this.refs.btnClickNone; }; } render() { return <div className="container-fluid"> <h4>Show on Click, Hide on Blur</h4> <button className="btn btn-primary" ref="btnClickBlur"> Show the Popover </button> <wjInput.Popup showTrigger="Click" hideTrigger="Blur" initialized={this.initClickBlurPopup} className="popover"> <h3 className="popover-title"> Title </h3> <div className="popover-content"> Hello Popup<br /> This is a multi-line message! This is a long line in my popover, which uses Bootstrap's 'popover-content' style. </div> </wjInput.Popup> <hr /> <h4>Show on Click, Hide on Click</h4> <button className="btn btn-primary" ref="btnClickClick"> Show the Popover </button> <wjInput.Popup showTrigger="Click" hideTrigger="Click" initialized={this.initClickClickPopup} className="popover"> <h3 className="popover-title"> Title </h3> <div className="popover-content"> Hello Popup<br /> This is a multi-line message! This is a long line in my popover, which uses Boostrap's 'popover-content' style. </div> </wjInput.Popup> <hr /> <h4>Show on Click, Hide with Code</h4> <button className="btn btn-primary" ref="btnClickNone"> Show the Popover </button> <wjInput.Popup showTrigger="Click" hideTrigger="None" initialized={this.initClickNonePopup} className="popover"> <h3 className="popover-title"> Title </h3> <div className="popover-content"> <form name="popoverForm"> <p> Hello Popup<br /> This is a multi-line message!</p> <pre>2 + 3 = <span className="">5</span></pre> <div className="form-group"> <div className="input-group"> <div className="input-group-addon">@</div> <input className="form-control" type="email" placeholder="Enter email"/> </div> </div> <div className="form-actions"> <button className="btn btn-danger wj-hide">Close</button> <button className="btn btn-primary wj-hide-ok">Save changes</button> </div> </form> </div> </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; }