具有自定义元素的弹出窗口

弹出窗口可能具有控制其位置和可见性的所有者元素.

showTrigger 和 hideTrigger 属性确定当所有者元素被单击时或当弹出窗口丢失焦点时是否应该显示或隐藏弹出窗口.

在Bootstrap CSS中,具有所有者元素的弹出窗口称为“Popovers”.

点击显示,点击其他区域隐藏

最常见的Popover类型是将 showTrigger 设置为“Click”并将 hideTrigger 设置为“Blur”.

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(props) { super(props); 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; }