ダイアログ

Wijmoでは、Popupコントロールを使ってダイアログを作成できます。ダイアログには所有者要素はありません。このサンプルは、下の各ボタンでPopupコントロールを使用してダイアログを表示します。

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('フォームを送信しました。'); 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('フォームを送信しました。'); } }); }); // document.querySelector('#btnEditAccount').addEventListener('click', () => { frmEditAccount.show(true, (sender) => { if (sender.dialogResult == 'submit') { alert('フォームを送信しました。'); } }); }); // // 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 ? 'パスワードが一致しません。' : ''; 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"> ログイン </button> <button id="btnCreateAccount" class="btn btn-primary"> アカウントの作成 </button> <button id="btnEditAccount" class="btn btn-primary"> アカウントの更新 </button> <!-- Log In form --> <form id="frmLogin"> <h4 class="modal-header"> ログイン <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> メール: <input class="form-control" required type="email" /> </label> <br /> <label> パスワード: <input class="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。" /> </label> <br /> <label> 設定を保存 <input type="checkbox" /> </label> <br /> <a href="" class="wj-hide-create">まだアカウントを作成していない場合</a> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> ログイン </button> </div> </form> <!-- Create Account form --> <form id="frmCreateAccount"> <h4 class="modal-header"> アカウントの作成 <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> 名前: <input id="name" class="form-control" required pattern=".{2,}" title="2文字以上入力してください。" /> </label> <br /> <label> メール: <input id="email" class="form-control" type="email" required /> </label> <br /> <label> パスワード: <input id="password" class="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。" /> </label> <br /> <label> パスワードの確認: <input id="confirm" class="form-control" type="password" /> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> アカウントの作成 </button> </div> </form> <!-- Edit Account form --> <form id="frmEditAccount"> <h4 class="modal-header"> アカウントの編集 <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> メール: <input id="edit-email" class="form-control" required type="email" /> </label> <br /> <label> 現在のパスワード: <input id="current-password" class="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。" /> </label> <br /> <label> 新しい名前: <input id="new-name" class="form-control" required pattern=".{2,}" title="2文字以上入力してください。" /> </label> <br /> <label> 新しいパスワード: <input id="new-password" class="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。" /> </label> <br /> <label> 新しいパスワードの確認: <input id="confirm-password" class="form-control" type="password" /> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> アカウントの更新 </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('フォームを送信しました。'); 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)"> ログイン </button> <button class="btn btn-primary btn-space" (click)="frmCreateAccountPopup.show(true)"> アカウントの作成 </button> <button class="btn btn-primary" (click)="frmEditAccountPopup.show(true)"> アカウントの更新 </button> <!-- Log In form --> <wj-popup #frmLoginPopup> <form ngNativeValidate (ngSubmit)="onSubmit(frmLoginPopup)"> <h4 class="modal-header"> ログイン <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> メール: <input class="form-control" required type="email" /> </label> <br /> <label> パスワード: <input class="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。" /> </label> <br /> <label> 設定を保存 <input type="checkbox" /> </label> <br /> <a href="" class="wj-hide-create" (click)="frmCreateAccountPopup.show(true)">まだアカウントを作成していない場合</a> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> ログイン </button> </div> </form> </wj-popup> <!-- Create Account form --> <wj-popup #frmCreateAccountPopup> <form #frmCreateAccount ngNativeValidate (ngSubmit)="onSubmit(frmCreateAccountPopup)"> <h4 class="modal-header"> アカウントの作成 <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> 名前: <input class="form-control" required pattern=".{2,}" title="2文字以上入力してください。" /> </label> <br /> <label> メール: <input class="form-control" type="email" required /> </label> <br /> <label> パスワード: <input name="pswdFrmCreate" class="form-control" type="password" required pattern=".{4,}" [(ngModel)]="pw" title="4文字以上入力してください。" /> </label> <br /> <label> パスワードの確認: <input class="form-control" name="cnfrmPswdFrmCreate" [(ngModel)]="pw2" type="password" required validateEqual="pswdFrmCreate" #cnfrmPswdFrmCreate="ngModel" /> <small [hidden]="cnfrmPswdFrmCreate.valid || (cnfrmPswdFrmCreate.pristine && !frmCreateAccount.submitted)"> パスワードが一致しません。 </small> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> アカウントの作成 </button> </div> </form> </wj-popup> <!-- Edit Account form --> <wj-popup #frmEditAccountPopup> <form #frmEditAccount ngNativeValidate (ngSubmit)="onSubmit(frmEditAccountPopup)"> <h4 class="modal-header"> アカウントの更新 <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> メール: <input class="form-control" required type="email" /> </label> <br /> <label> 現在のパスワード: <input class="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。" /> </label> <br /> <label> 新しい名前: <input class="form-control" required pattern=".{2,}" title="2文字以上入力してください。" /> </label> <br /> <label> 新しいパスワード: <input name="pswdFrmEdit" [(ngModel)]="pw3" class="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。" /> </label> <br /> <label> 新しいパスワードの確認: <input class="form-control" name="cnfrmPswdFrmEdit" [(ngModel)]="pw4" type="password" required validateEqual="pswdFrmEdit" #cnfrmPswdFrmEdit="ngModel" /> <small [hidden]="cnfrmPswdFrmEdit.valid || (cnfrmPswdFrmEdit.pristine && !frmEditAccount.submitted)"> パスワードが一致しません。 </small> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> アカウントの更新 </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; } 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('フォームを送信しました。'); 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)}> ログイン </button> <button className="btn btn-primary btn-space" onClick={e => this.state.frmCreateAccountPopup.show(true)}> アカウントの作成 </button> <button className="btn btn-primary" onClick={e => this.state.frmEditAccountPopup.show(true)}> アカウントの更新 </button> <wjInput.Popup id="frmLoginPopup" initialized={this.initLoginForm}> <form onSubmit={e => this.onsubmit(e, this.state.frmLoginPopup)}> <h4 className="modal-header"> ログイン <button type="button" className="close wj-hide">&times;</button> </h4> <div className="modal-body"> <label> メール: <input className="form-control" required type="email"/> </label> <br /> <label> パスワード: <input className="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。"/> </label> <br /> <label> 設定を保存 <input className="remember" type="checkbox" defaultChecked={false} onChange={(e) => this.updateRememberStatus(e.target)}/> </label> <br /> <a href="javascript:void(0)" onClick={this.switchPopup}> まだアカウントを作成していない場合 </a> </div> <div className="modal-footer"> <button className="btn btn-primary"> ログイン </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"> アカウントの作成 <button type="button" className="close wj-hide">&times;</button> </h4> <div className="modal-body"> <label> 名前: <input className="form-control" required pattern=".{2,}" title="2文字以上入力してください。"/> </label> <br /> <label> メール: <input className="form-control" type="email" required/> </label> <br /> <label> パスワード: <input name="pswdFrmCreate" className="form-control" type="password" required pattern=".{4,}" onChange={this.updatePW1} title="4文字以上入力してください。"/> </label> <br /> <label> パスワードの確認: <input className="form-control" name="cnfrmPswdFrmCreate" onChange={this.updatePW2} type="password" required/> <small hidden={this.state.cnfrmPswdFrmCreateValid}> パスワードが一致しません。 </small> </label> </div> <div className="modal-footer"> <button className="btn btn-primary" type="onsubmit"> アカウントの作成 </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"> アカウントの更新 <button type="button" className="close wj-hide">&times;</button> </h4> <div className="modal-body"> <label> メール: <input className="form-control" required type="email"/> </label> <br /> <label> 現在のパスワード: <input className="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。"/> </label> <br /> <label> 新しい名前: <input className="form-control" required pattern=".{2,}" title="2文字以上入力してください。"/> </label> <br /> <label> 新しいパスワード: <input name="pswdFrmEdit" onChange={this.updatePW3} className="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。"/> </label> <br /> <label> 新しいパスワードの確認: <input className="form-control" name="cnfrmPswdFrmEdit" onChange={this.updatePW4} type="password" required/> <small hidden={this.state.cnfrmPswdFrmEditValid}> パスワードが一致しません。 </small> </label> </div> <div className="modal-footer"> <button className="btn btn-primary" type="onSubmit"> アカウントの更新 </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; } <template> <div class="container-fluid"> <button class="btn btn-primary btn-space" @click="frmLoginPopup.show(true)"> ログイン </button> <button class="btn btn-primary btn-space" @click="frmCreateAccountPopup.show(true)"> アカウントの作成 </button> <button class="btn btn-primary" @click="frmEditAccountPopup.show(true)"> アカウントの更新 </button> <!-- Log In form --> <wj-popup id="frmLoginPopup" :initialized="initForm"> <form @submit.prevent="onSubmit(frmLoginPopup)"> <h4 class="modal-header"> ログイン <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> メール: <input class="form-control" required type="email"/> </label> <br /> <label> パスワード: <input class="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。"/> </label> <br /> <label> 設定を保存 <input class="remember" type="checkbox" v-model="isRemember"/> </label> <br /> <a href="" class="wj-hide-create" @click="frmCreateAccountPopup.show(true)">まだアカウントを作成していない場合</a> </div> <div class="modal-footer"> <button class="btn btn-primary"> ログイン </button> </div> </form> </wj-popup> <!-- Create Account form --> <wj-popup id="frmCreateAccountPopup" :initialized="initForm"> <form @submit.prevent="onSubmit(frmCreateAccountPopup)"> <h4 class="modal-header"> アカウントの作成 <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> 名前: <input class="form-control" required pattern=".{2,}" title="2文字以上入力してください。" /> </label> <br /> <label> メール: <input class="form-control" type="email" required /> </label> <br /> <label> パスワード: <input name="pswdFrmCreate" class="form-control" type="password" required pattern=".{4,}" v-model="pw1" title="4文字以上入力してください。" /> </label> <br /> <label> パスワードの確認: <input class="form-control" name="cnfrmPswdFrmCreate" v-model="pw2" type="password" required validateEqual="pswdFrmCreate"/> <small :hidden="cnfrmPswdFrmCreateValid"> パスワードが一致しません。 </small> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> アカウントの作成 </button> </div> </form> </wj-popup> <!-- Edit Account form --> <wj-popup id="frmEditAccountPopup" :initialized="initForm"> <form @submit.prevent="onSubmit(frmEditAccountPopup)"> <h4 class="modal-header"> アカウントの更新 <button type="button" tabindex="-1" class="close wj-hide">&times;</button> </h4> <div class="modal-body"> <label> メール: <input class="form-control" required type="email" /> </label> <br /> <label> 現在のパスワード: <input class="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。" /> </label> <br /> <label> 新しい名前: <input class="form-control" required pattern=".{2,}" title="2文字以上入力してください。" /> </label> <br /> <label> 新しいパスワード: <input name="pswdFrmEdit" v-model="pw3" class="form-control" type="password" required pattern=".{4,}" title="4文字以上入力してください。" /> </label> <br /> <label> 新しいパスワードの確認: <input class="form-control" name="cnfrmPswdFrmEdit" v-model="pw4" type="password" required validateEqual="pswdFrmEdit" /> <small :hidden="cnfrmPswdFrmEditValid"> パスワードが一致しません。 </small> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> アカウントの更新 </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('フォームを送信しました。'); 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>