In Wijmo, you can create Dialogs using the Popup control. Dialogs do not have owner elements. This sample displays a dialogs using the Popup control for each button below.
Learn about Input Controls | Popup Dialog Documentation | Popup API Reference
This example uses React.
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useState } from 'react';
import useEvent from 'react-use-event-hook';
import * as wjInput from '@mescius/wijmo.react.input';
import './app.css';
function App() {
const [pw1, setPw1] = useState('');
const [pw2, setPw2] = useState('');
const [pw3, setPw3] = useState('');
const [pw4, setPw4] = useState('');
const [isRemember, setIsRemember] = useState(false);
const [frmLoginPopup, setFrmLoginPopup] = useState({});
const [frmCreateAccountPopup, setFrmCreateAccountPopup] = useState({});
const [frmEditAccountPopup, setFrmEditAccountPopup] = useState({});
const [cnfrmPswdFrmEditValid, setCnfrmPswdFrmEditValid] = useState(true);
const [cnfrmPswdFrmCreateValid, setCnfrmPswdFrmCreateValid] = useState(true);
const initLoginForm = useEvent((form) => {
setFrmLoginPopup(form);
});
const initCreateForm = useEvent((form) => {
setFrmCreateAccountPopup(form);
});
const initEditForm = useEvent((form) => {
setFrmEditAccountPopup(form);
});
const onSubmit = (e, popup) => {
e.preventDefault();
alert('form submitted');
popup.hide();
};
const updatePW1 = (e) => {
setPw1(e.target.value);
};
const updatePW2 = (e) => {
setPw2(e.target.value);
setCnfrmPswdFrmCreateValid(e.target.value !== pw1);
};
const updatePW3 = (e) => {
setPw3(e.target.value);
};
const updatePW4 = (e) => {
setPw4(e.target.value);
setCnfrmPswdFrmEditValid(e.target.value !== pw3);
};
const updateRememberStatus = (e) => {
setIsRemember(e.target.checked);
};
const switchPopup = () => {
frmCreateAccountPopup.show(true);
};
return (<div className="container-fluid">
<button className="btn btn-primary btn-space" onClick={(e) => frmLoginPopup.show(true)}>
Log In
</button>
<button className="btn btn-primary btn-space" onClick={(e) => frmCreateAccountPopup.show(true)}>
Create Account
</button>
<button className="btn btn-primary" onClick={(e) => frmEditAccountPopup.show(true)}>
Edit Account
</button>
<wjInput.Popup id="frmLoginPopup" initialized={initLoginForm}>
<form onSubmit={(e) => onSubmit(e, 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={updateRememberStatus}/>
</label>
<br />
<a href="javascript:void(0)" onClick={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={initCreateForm}>
<form onSubmit={(e) => onSubmit(e, 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={updatePW1} title="Please enter 4 characters or more."/>
</label>
<br />
<label>
Confirm Password:
<input className="form-control" name="cnfrmPswdFrmCreate" onChange={updatePW2} type="password" required/>
<small hidden={!cnfrmPswdFrmCreateValid}>
Passwords don't match.
</small>
</label>
</div>
<div className="modal-footer">
<button className="btn btn-primary" type="submit">
Create Account
</button>
</div>
</form>
</wjInput.Popup>
<wjInput.Popup id="frmEditAccountPopup" initialized={initEditForm}>
<form onSubmit={(e) => onSubmit(e, 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={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={updatePW4} type="password" required/>
<small hidden={!cnfrmPswdFrmEditValid}>
Passwords don't match.
</small>
</label>
</div>
<div className="modal-footer">
<button className="btn btn-primary" type="submit">
Update Account
</button>
</div>
</form>
</wjInput.Popup>
</div>);
}
;
const container = document.getElementById('app');
if (container) {
const root = ReactDOM.createRoot(container);
root.render(<App />);
}
Submit and view feedback for