web编程学习::弹出输入框
弹出输入框
本篇以html+css+jquery+jquery-ui实现web弹出窗口,用以填写资料做下一步应用。
参考资料: jquery-ui官方文档中文版、cdn-jquery源
一、效果展示
二、html代码部分:
(1)html的其他部分就不展示出来了,以下部分就是上面的窗口部分。
<div id="dialogId" title="寄售信息" >
<div style="text-align:center;">
<label >寄售地址:</label>
<input type="text" id="consignmentSender">
</div>
<div style="text-align:center;">
<label>寄售电量:</label>
<input type="text" id="totalEnergytoSell">
</div>
<div style="text-align:center;">
<label>寄售总价:</label>
<input type="text" id="totalPrice">
</div>
</div>
(2)引入js:注意引用的顺序
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://libs.baidu.com/jqueryui/1.10.2/jquery-ui.min.js"></script>
三、js脚本部分
$(document).ready(function(){
//隐藏信息输入框
$("#dialogId").hide();
});
//这里为显示窗口的js代码,可以新建一个按钮来触发
function showDialog(){
$("#dialogId").dialog({
//height:300,
//width:200,
//modal:true,
draggalbe:true,
minWidth:400,
buttons:{
"确认":function(){
},
"取消":function(){
$(this).dialog("destroy");
}
}
});
//$("#consignmentSender").val($("#eth_account").val());
}
四、可能出现的问题
(1)使用"close"关闭窗口时,可能会出现a.browser is undefined 的问题,原因是jquery 1.9版本之后就不再支持.browser了,只需把对应的jquery-ui.js换成更新的版本即可。
五、关于样式问题
(1)可直接下载或构筑自己的ui主题:http://jqueryui.com/themeroller/