對話視窗
jQuery
1.用npm指令安裝
npm install baguette-dialog
2.用html語法引入
<script src="baguette-dialog/baguette-dialog.jquery.js"></script>
require('baguette-dialog/baguette-dialog.jquery.js');
<div id="popup-dialog">
<div class="header">
<div id="close-dialog">X</div>
</div>
<div class="message">
<h3>This is a simple example</h3>
</div>
</div>
#show-dialog {
cursor: pointer;
font-size: 18px;
}
#popup-dialog {
display: block;
width: 260px;
text-align: center;
background-color: #fff;
padding: 1.5%;
border-radius: 5px;
}
#popup-dialog .header {
display: block;
width: 100%;
font-size: 14px;
height: 14px;
}
#popup-dialog .header #close-dialog {
float:right;
width: 14px;
text-align:center;
margin-right:10px;
cursor: pointer;
}
$('#popup-dialog').dialog();
$('#popup-dialog').dialog('show');
$('#popup-dialog').dialog('hide');
$('#popup-dialog').dialog('dismiss');