63 lines
1.7 KiB
HTML
63 lines
1.7 KiB
HTML
<!--
|
||
用法示例:
|
||
<button onclick="App.openModal('example-modal')">打开弹窗</button>
|
||
|
||
<div id="example-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>示例标题</h3>
|
||
<button class="modal-close" onclick="App.closeModal('example-modal')">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>这是一个示例弹窗内容</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn-secondary" onclick="App.closeModal('example-modal')">取消</button>
|
||
<button class="btn-primary">确认</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
-->
|
||
|
||
<style>
|
||
.modal {
|
||
@apply fixed inset-0 z-50 overflow-y-auto hidden;
|
||
}
|
||
|
||
.modal.is-active {
|
||
@apply block;
|
||
}
|
||
|
||
.modal-backdrop {
|
||
@apply fixed inset-0 bg-black bg-opacity-50 transition-opacity;
|
||
}
|
||
|
||
.modal-container {
|
||
@apply flex min-h-screen items-end justify-center py-4 px-4 text-center sm:block sm:p-0;
|
||
}
|
||
|
||
.modal-content {
|
||
@apply relative inline-block w-full max-w-lg bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full;
|
||
}
|
||
|
||
.modal-header {
|
||
@apply px-6 py-4 border-b border-gray-200 flex justify-between items-center;
|
||
}
|
||
|
||
.modal-header h3 {
|
||
@apply text-lg font-medium text-gray-800;
|
||
}
|
||
|
||
.modal-close {
|
||
@apply text-gray-400 hover:text-gray-500 focus:outline-none text-xl font-bold;
|
||
}
|
||
|
||
.modal-body {
|
||
@apply p-6;
|
||
}
|
||
|
||
.modal-footer {
|
||
@apply px-6 py-4 bg-gray-50 flex justify-end space-x-3;
|
||
}
|
||
</style>
|