49 lines
1.4 KiB
HTML
49 lines
1.4 KiB
HTML
<div>
|
|
<h1>popup</h1>
|
|
<hr />
|
|
<p>
|
|
创建弹出窗口。
|
|
</p>
|
|
<hr />
|
|
<h2>示例</h2>
|
|
<div id="popup-sample">
|
|
<button id="button-popup">Popup</button>
|
|
</div>
|
|
<script type="text/javascript">
|
|
const ui = window['lib-ui'];
|
|
|
|
document.querySelector('#button-popup').addEventListener('click', () => {
|
|
const popup = new ui.Popup({
|
|
title: 'title long title, looooooong title, looooooooooooooooooooooooong ~',
|
|
content: 'content',
|
|
mask: false,
|
|
resizable: true,
|
|
collapsable: true,
|
|
minWidth: 210,
|
|
minHeight: 200,
|
|
buttons: [
|
|
{
|
|
text: 'Loading', trigger: p => {
|
|
p.loading = true;
|
|
setTimeout(() => p.loading = false, 1000);
|
|
return false;
|
|
}
|
|
},
|
|
{ text: 'OK' }
|
|
]
|
|
});
|
|
popup.show();
|
|
});
|
|
</script>
|
|
<style type="text/css">
|
|
:root {
|
|
--title-bg-color: lightgray;
|
|
--title-color: #333;
|
|
}
|
|
.popup-mask .popup-container {
|
|
min-width: 210px;
|
|
min-height: 200px;
|
|
max-width: unset;
|
|
}
|
|
</style>
|
|
</div> |