55 lines
1.7 KiB
HTML
55 lines
1.7 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: ui.createElement('div', 'class-content',
|
|
ui.createElement('span', span => span.innerText = 'Text content.')
|
|
),
|
|
mask: false,
|
|
// movable: 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' }
|
|
],
|
|
onMoveEnded: () => console.log('move ended.', popup.rect),
|
|
onResizeEnded: () => console.log('resize ended.', popup.rect)
|
|
});
|
|
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> |