示例
对话框
对话框是没有所有者元素的弹出窗口控件。 它们允许用户输入或编辑信息，而无需切换到新页面或视图。 它们可以是模态的或无模式的，并且通常以屏幕为中心.
使用 show 方法显示对话框，该方法具有可选参数，用于定义对话框是否应为模态或无模式，并且在对话框关闭时调用回调函数.
当对话框失去焦点时，当用户按下Escape键时，对话框将被关闭。 当用户单击具有以“wj-hide”开头的类的元素（例如“wj-hide”，“wj-hide-ok”或“wj-hide-cancel”）时，它们也被解除。 在后一种情况下，类名称被分配给对话框的 dialogResult 属性，并且可以由回调函数或 hidden 事件处理程序使用来决定如何处理对话框的内容.
此演示通过定义模拟用户授权UI的三个对话框来演示。 请注意对话框如何提供HTML5样式验证和从另一个调用对话框的功能（您可以从登录对话框中调用创建帐户对话框）:
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() {
// create forms
let frmLogin = new input.Popup('#frmLogin'), frmCreateAccount = new input.Popup('#frmCreateAccount'), frmEditAccount = new input.Popup('#frmEditAccount');
//
// show forms
document.querySelector('#btnLogin').addEventListener('click', () => {
frmLogin.show(true, (sender) => {
switch (sender.dialogResult) {
case 'submit':
alert('form submitted');
break;
case 'wj-hide-create':
document.getElementById('btnCreateAccount').click(); // open the Create Account form
break;
}
});
});
//
document.querySelector('#btnCreateAccount').addEventListener('click', () => {
frmCreateAccount.show(true, (sender) => {
if (sender.dialogResult == 'submit') {
alert('form submitted');
}
});
});
//
document.querySelector('#btnEditAccount').addEventListener('click', () => {
frmEditAccount.show(true, (sender) => {
if (sender.dialogResult == 'submit') {
alert('form submitted');
}
});
});
//
// validate the form but don't submit
document.body.addEventListener('submit', e => {
e.preventDefault(); // don't submit
//
if (e.target.checkValidity()) {
let dlg = wijmo.Control.getControl(e.target);
dlg.hide('submit'); // close the dialog passing a dialogResult
}
});
//
// validate password/new password confirmation
ensureSameValue('password', 'confirm'); // create account
ensureSameValue('new-password', 'confirm-password'); // edit account
//
function ensureSameValue(f1, f2) {
let inputs = [document.getElementById(f1), document.getElementById(f2)];
//
inputs.forEach(input => {
input.addEventListener('input', () => {
let err = inputs[0].value != inputs[1].value ? 'Passwords don\'t match.' : '';
inputs[1].setCustomValidity(err);
});
});
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Dialogs</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>
<button id="btnCreateAccount" class="btn btn-primary">
Create Account
</button>
<button id="btnEditAccount" class="btn btn-primary">
Edit Account
</button>
<!-- Log In form -->
<form id="frmLogin">
<h4 class="modal-header">
Log in
<button type="button" tabindex="-1" class="close wj-hide">×</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 />
<label>
Remember Me
<input type="checkbox" />
</label>
<br />
<a href="" class="wj-hide-create">Don't have an account yet?</a>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Log in
</button>
</div>
</form>
<!-- Create Account form -->
<form id="frmCreateAccount">
<h4 class="modal-header">
Create Account
<button type="button" tabindex="-1" class="close wj-hide">×</button>
</h4>
<div class="modal-body">
<label>
Name:
<input id="name" class="form-control" required pattern=".{2,}"
title="Please enter 2 characters or more." />
</label>
<br />
<label>
Email:
<input id="email" class="form-control" type="email" required />
</label>
<br />
<label>
Password:
<input id="password" class="form-control" type="password" required pattern=".{4,}"
title="Please enter 4 characters or more." />
</label>
<br />
<label>
Confirm Password:
<input id="confirm" class="form-control" type="password" />
</label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Create Account
</button>
</div>
</form>
<!-- Edit Account form -->
<form id="frmEditAccount">
<h4 class="modal-header">
Edit Account
<button type="button" tabindex="-1" class="close wj-hide">×</button>
</h4>
<div class="modal-body">
<label>
Email:
<input id="edit-email" class="form-control" required type="email" />
</label>
<br />
<label>
Current Password:
<input id="current-password" class="form-control" type="password" required pattern=".{4,}"
title="Please enter 4 characters or more." />
</label>
<br />
<label>
New Name:
<input id="new-name" class="form-control" required pattern=".{2,}"
title="Please enter 2 characters or more." />
</label>
<br />
<label>
New Password:
<input id="new-password" class="form-control" type="password" required pattern=".{4,}"
title="Please enter 4 characters or more." />
</label>
<br />
<label>
Confirm New Password:
<input id="confirm-password" class="form-control" type="password" />
</label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Update Account
</button>
</div>
</form>
</div>
</body>
</html>
.modal-body {
min-width: 300px;
}
input:invalid {
border-color: red;
}
body {
margin-bottom: 24pt;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as input from '@grapecity/wijmo.input';
//
import { Directive, forwardRef, Attribute, Component, enableProdMode, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Validator, AbstractControl, NG_VALIDATORS, FormsModule } from '@angular/forms';
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 {
onSubmit(popup: input.Popup) {
alert('form submitted');
popup.hide();
}
}
//
// EqualValidator
@Directive({
selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
]
})
export class EqualValidator implements Validator {
constructor(@Attribute('validateEqual') public validateEqual: string) { }
//
validate(c: AbstractControl): { [key: string]: any } {
// self value (e.g. retype password)
let v = c.value;
// control value (e.g. password)
let e = c.root.get(this.validateEqual);
//
// value not equal
if (e && v !== e.value) return {
validateEqual: false
}
//
return null;
}
}
//
@NgModule({
imports: [WjInputModule, FormsModule, BrowserModule],
declarations: [EqualValidator, 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 Dialogs</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>
<button class="btn btn-primary btn-space" (click)="frmCreateAccountPopup.show(true)">
Create Account
</button>
<button class="btn btn-primary" (click)="frmEditAccountPopup.show(true)">
Edit Account
</button>
<!-- Log In form -->
<wj-popup #frmLoginPopup>
<form ngNativeValidate (ngSubmit)="onSubmit(frmLoginPopup)">
<h4 class="modal-header">
Log in
<button type="button" tabindex="-1" class="close wj-hide">×</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 />
<label>
Remember Me
<input type="checkbox" />
</label>
<br />
<a href="" class="wj-hide-create" (click)="frmCreateAccountPopup.show(true)">Don't have an account
yet?</a>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Log in
</button>
</div>
</form>
</wj-popup>
<!-- Create Account form -->
<wj-popup #frmCreateAccountPopup>
<form #frmCreateAccount ngNativeValidate (ngSubmit)="onSubmit(frmCreateAccountPopup)">
<h4 class="modal-header">
Create Account
<button type="button" tabindex="-1" class="close wj-hide">×</button>
</h4>
<div class="modal-body">
<label>
Name:
<input class="form-control" required pattern=".{2,}" title="Please enter 2 characters or more." />
</label>
<br />
<label>
Email:
<input class="form-control" type="email" required />
</label>
<br />
<label>
Password:
<input name="pswdFrmCreate" class="form-control" type="password" required pattern=".{4,}"
[(ngModel)]="pw" title="Please enter 4 characters or more." />
</label>
<br />
<label>
Confirm Password:
<input class="form-control" name="cnfrmPswdFrmCreate" [(ngModel)]="pw2" type="password" required
validateEqual="pswdFrmCreate" #cnfrmPswdFrmCreate="ngModel" />
<small
[hidden]="cnfrmPswdFrmCreate.valid || (cnfrmPswdFrmCreate.pristine && !frmCreateAccount.submitted)">
Passwords don't match.
</small>
</label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Create Account
</button>
</div>
</form>
</wj-popup>
<!-- Edit Account form -->
<wj-popup #frmEditAccountPopup>
<form #frmEditAccount ngNativeValidate (ngSubmit)="onSubmit(frmEditAccountPopup)">
<h4 class="modal-header">
Edit Account
<button type="button" tabindex="-1" class="close wj-hide">×</button>
</h4>
<div class="modal-body">
<label>
Email:
<input class="form-control" required type="email" />
</label>
<br />
<label>
Current Password:
<input class="form-control" type="password" required pattern=".{4,}"
title="Please enter 4 characters or more." />
</label>
<br />
<label>
New Name:
<input class="form-control" required pattern=".{2,}" title="Please enter 2 characters or more." />
</label>
<br />
<label>
New Password:
<input name="pswdFrmEdit" [(ngModel)]="pw3" class="form-control" type="password" required
pattern=".{4,}" title="Please enter 4 characters or more." />
</label>
<br />
<label>
Confirm New Password:
<input class="form-control" name="cnfrmPswdFrmEdit" [(ngModel)]="pw4" type="password" required
validateEqual="pswdFrmEdit" #cnfrmPswdFrmEdit="ngModel" />
<small [hidden]="cnfrmPswdFrmEdit.valid || (cnfrmPswdFrmEdit.pristine && !frmEditAccount.submitted)">
Passwords don't match.
</small>
</label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Update Account
</button>
</div>
</form>
</wj-popup>
</div>
.modal-body {
min-width: 300px;
}
input:invalid {
border-color: red;
}
body {
margin-bottom: 24pt;
}
.btn-space {
margin-right: 5px !important;
}
<template>
<div class="container-fluid">
<button class="btn btn-primary btn-space" @click="frmLoginPopup.show(true)">
Log In
</button>
<button class="btn btn-primary btn-space" @click="frmCreateAccountPopup.show(true)">
Create Account
</button>
<button class="btn btn-primary" @click="frmEditAccountPopup.show(true)">
Edit Account
</button>
<!-- Log In form -->
<wj-popup id="frmLoginPopup" :initialized="initForm">
<form @submit.prevent="onSubmit(frmLoginPopup)">
<h4 class="modal-header">
Log in
<button type="button" tabindex="-1" class="close wj-hide">×</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 />
<label>
Remember Me
<input class="remember" type="checkbox" v-model="isRemember"/>
</label>
<br />
<a href="" class="wj-hide-create" @click="frmCreateAccountPopup.show(true)">Don't have an account
yet?</a>
</div>
<div class="modal-footer">
<button class="btn btn-primary">
Log in
</button>
</div>
</form>
</wj-popup>
<!-- Create Account form -->
<wj-popup id="frmCreateAccountPopup" :initialized="initForm">
<form @submit.prevent="onSubmit(frmCreateAccountPopup)">
<h4 class="modal-header">
Create Account
<button type="button" tabindex="-1" class="close wj-hide">×</button>
</h4>
<div class="modal-body">
<label>
Name:
<input class="form-control" required pattern=".{2,}" title="Please enter 2 characters or more." />
</label>
<br />
<label>
Email:
<input class="form-control" type="email" required />
</label>
<br />
<label>
Password:
<input name="pswdFrmCreate" class="form-control" type="password" required pattern=".{4,}"
v-model="pw1" title="Please enter 4 characters or more." />
</label>
<br />
<label>
Confirm Password:
<input class="form-control" name="cnfrmPswdFrmCreate" v-model="pw2" type="password" required
validateEqual="pswdFrmCreate"/>
<small
:hidden="cnfrmPswdFrmCreateValid">
Passwords don't match.
</small>
</label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Create Account
</button>
</div>
</form>
</wj-popup>
<!-- Edit Account form -->
<wj-popup id="frmEditAccountPopup" :initialized="initForm">
<form @submit.prevent="onSubmit(frmEditAccountPopup)">
<h4 class="modal-header">
Edit Account
<button type="button" tabindex="-1" class="close wj-hide">×</button>
</h4>
<div class="modal-body">
<label>
Email:
<input class="form-control" required type="email" />
</label>
<br />
<label>
Current Password:
<input class="form-control" type="password" required pattern=".{4,}"
title="Please enter 4 characters or more." />
</label>
<br />
<label>
New Name:
<input class="form-control" required pattern=".{2,}" title="Please enter 2 characters or more." />
</label>
<br />
<label>
New Password:
<input name="pswdFrmEdit" v-model="pw3" class="form-control" type="password" required
pattern=".{4,}" title="Please enter 4 characters or more." />
</label>
<br />
<label>
Confirm New Password:
<input class="form-control" name="cnfrmPswdFrmEdit" v-model="pw4" type="password" required
validateEqual="pswdFrmEdit" />
<small :hidden="cnfrmPswdFrmEditValid">
Passwords don't match.
</small>
</label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Update Account
</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 {
pw1: '',
pw2: '',
pw3: '',
pw4: '',
isRemember: false,
frmLoginPopup: {},
frmCreateAccountPopup: {},
frmEditAccountPopup: {},
cnfrmPswdFrmEditValid: true,
cnfrmPswdFrmCreateValid: true
}
},
methods: {
initForm: function(popup){
this[popup.hostElement.id] = popup;
},
onSubmit: function(popup){
alert('form submitted');
popup.hide();
}
},
watch: {
pw2: function(){
this.cnfrmPswdFrmCreateValid = this.pw2 != this.pw1 ? false : true;
},
pw4: function(){
this.cnfrmPswdFrmEditValid = this.pw4 != this.pw3 ? false : true;
}
}
})
let vm = new Vue({ render: h => h(App) }).$mount('#app');
</script>
<style>
.modal-body {
min-width: 300px;
}
input:invalid {
border-color: red;
}
body {
margin-bottom: 24pt;
}
.btn-space {
margin-right: 5px !important;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Dialogs</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.initLoginForm = (form) => {
this.setState({ frmLoginPopup: form });
};
this.initCreateForm = (form) => {
this.setState({ frmCreateAccountPopup: form });
};
this.initEditForm = (form) => {
this.setState({ frmEditAccountPopup: form });
};
this.onsubmit = (e, popup) => {
event.preventDefault();
alert('form submitted');
popup.hide();
};
this.updatePW1 = (e) => {
this.setState({ pw1: e.target.value });
};
this.updatePW2 = (e) => {
this.setState({ pw2: e.target.value }, () => {
this.setState({ cnfrmPswdFrmCreateValid: this.state.pw2 != this.state.pw1 ? false : true });
});
};
this.updatePW3 = (e) => {
this.setState({ pw3: e.target.value });
};
this.updatePW4 = (e) => {
this.setState({ pw4: e.target.value }, () => {
this.setState({ cnfrmPswdFrmEditValid: this.state.pw4 != this.state.pw3 ? false : true });
});
};
this.updateRememberStatus = (target) => {
this.setState({ isRemember: target.checked });
};
this.switchPopup = () => {
this.state.frmCreateAccountPopup.show(true);
};
this.state = {
pw1: '',
pw2: '',
pw3: '',
pw4: '',
isRemember: false,
frmLoginPopup: {},
frmCreateAccountPopup: {},
frmEditAccountPopup: {},
cnfrmPswdFrmEditValid: true,
cnfrmPswdFrmCreateValid: true
};
}
;
render() {
return <div className="container-fluid">
<button className="btn btn-primary btn-space" onClick={e => this.state.frmLoginPopup.show(true)}>
Log In
</button>
<button className="btn btn-primary btn-space" onClick={e => this.state.frmCreateAccountPopup.show(true)}>
Create Account
</button>
<button className="btn btn-primary" onClick={e => this.state.frmEditAccountPopup.show(true)}>
Edit Account
</button>
<wjInput.Popup id="frmLoginPopup" initialized={this.initLoginForm}>
<form onSubmit={e => this.onsubmit(e, this.state.frmLoginPopup)}>
<h4 className="modal-header">
Log in
<button type="button" className="close wj-hide">×</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 />
<label>
Remember Me
<input className="remember" type="checkbox" defaultChecked={false} onChange={(e) => this.updateRememberStatus(e.target)}/>
</label>
<br />
<a href="javascript:void(0)" onClick={this.switchPopup}>
Don't have an account yet?
</a>
</div>
<div className="modal-footer">
<button className="btn btn-primary">
Log in
</button>
</div>
</form>
</wjInput.Popup>
<wjInput.Popup id="frmCreateAccountPopup" initialized={this.initCreateForm}>
<form onSubmit={e => this.onsubmit(e, this.state.frmCreateAccountPopup)}>
<h4 className="modal-header">
Create Account
<button type="button" className="close wj-hide">×</button>
</h4>
<div className="modal-body">
<label>
Name:
<input className="form-control" required pattern=".{2,}" title="Please enter 2 characters or more."/>
</label>
<br />
<label>
Email:
<input className="form-control" type="email" required/>
</label>
<br />
<label>
Password:
<input name="pswdFrmCreate" className="form-control" type="password" required pattern=".{4,}" onChange={this.updatePW1} title="Please enter 4 characters or more."/>
</label>
<br />
<label>
Confirm Password:
<input className="form-control" name="cnfrmPswdFrmCreate" onChange={this.updatePW2} type="password" required/>
<small hidden={this.state.cnfrmPswdFrmCreateValid}>
Passwords don't match.
</small>
</label>
</div>
<div className="modal-footer">
<button className="btn btn-primary" type="onsubmit">
Create Account
</button>
</div>
</form>
</wjInput.Popup>
<wjInput.Popup id="frmEditAccountPopup" initialized={this.initEditForm}>
<form onSubmit={e => this.onsubmit(e, this.state.frmEditAccountPopup)}>
<h4 className="modal-header">
Edit Account
<button type="button" className="close wj-hide">×</button>
</h4>
<div className="modal-body">
<label>
Email:
<input className="form-control" required type="email"/>
</label>
<br />
<label>
Current Password:
<input className="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more."/>
</label>
<br />
<label>
New Name:
<input className="form-control" required pattern=".{2,}" title="Please enter 2 characters or more."/>
</label>
<br />
<label>
New Password:
<input name="pswdFrmEdit" onChange={this.updatePW3} className="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more."/>
</label>
<br />
<label>
Confirm New Password:
<input className="form-control" name="cnfrmPswdFrmEdit" onChange={this.updatePW4} type="password" required/>
<small hidden={this.state.cnfrmPswdFrmEditValid}>
Passwords don't match.
</small>
</label>
</div>
<div className="modal-footer">
<button className="btn btn-primary" type="onSubmit">
Update Account
</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;
}
body {
margin-bottom: 24pt;
}
.btn-space {
margin-right: 5px !important;
}
USA - International
Japan
South
Korea