你的位置:首页 > Java教程

[Java教程]JS弹出模态窗口下拉列表特效

效果体验:http://hovertree.com/texiao/js/20/

或者扫描二维码在手机体验:
点击选择城市后,在弹出的层中的输入框,输入英文字母 h,会有HoverTree和Hewenqi两个选项,可以点击要输入的项。源码下载:http://hovertree.com/h/bjaf/95ese8s1.htm

欢迎关注微信公众号 何问起,账号: ihewenqi

或者微信扫描下面二维码关注:


代码如下:

<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><title>JS点击弹出模态窗口下拉列表特效 - 何问起</title><link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/20/css/demo.css"><style>* {padding: 0;margin: 0;}.content {margin: 50px auto 0;width: 300px;min-height: 500px;}.form-group {width: 100%;float: left;margin: 5px 0;}label {margin-bottom: 10px;float: left;}.field-input, select {width: calc(100% - 20px);float: left;padding: 10px;font-family: inherit;}</style><!--必要样式--><link rel="stylesheet" href="http://hovertree.com/texiao/js/20/css/pickout.css"></head><body><div class="container"><div class="content"><form action="#" method="post"><div class="form-group"><label for="name">姓名:</label><input type="text" name="name" id="name" class="field-input" placeholder="何问起"></div><div class="form-group"><label for="city">城市:</label><select name="city" id="city" class="city pickout" placeholder="选择一个城市"><option data-icon="&spades;" value="bj">北京</option><option data-icon="&clubs;" value="sh">上海</option><option data-icon="&hearts;" value="gz">广州</option><option selected data-icon="&diams;" value="sz">深圳</option><option data-icon="&#9786;" value="xg">香港</option><option data-icon="&#9792;" value="sjz">石家庄</option><option data-icon="&#9794;" value="cd">成都</option><option data-icon="&#x2605;" value="ht">HoverTree</option><option data-icon="&#x25C6;" value="ht">Hewenqi</option></select></div><div class="form-group"><label for="name2">昵称:</label><input type="text" name="name2" id="name2" class="field-input" placeholder="柯乐义"></div><div class="form-group"><label for="state">职位:</label><select name="state" id="state" class="state pickout" placeholder="选择一个职位"><option value="pe">项目经理</option><option value="pb">工程师</option><option value="ba">培训师</option><option value="sp">项目策划</option><option value="qd">前端开发</option></select></div></form></div></div><script src="http://hovertree.com/texiao/js/20/js/pickout.js"></script><script>// Preparar o select//pickout.to('.pickout');pickout.to({el: '.city',theme: 'dark',search: true});pickout.to({el: '.state',theme: 'clean',});// automaticamentepickout.updated('.city');</script></body></html>

转自:http://hovertree.com/h/bjaf/8htcr2vo.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html