您的位置：首页 > Web前端 > JavaScript

JS弹出模态窗口下拉列表特效

2016-04-14 19:47 726 查看

效果体验：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="♠" value="bj">北京</option>
<option data-icon="♣" value="sh">上海</option>
<option data-icon="♥" value="gz">广州</option>
<option selected data-icon="♦" value="sz">深圳</option>
<option data-icon="☺" value="xg">香港</option>
<option data-icon="♀" value="sjz">石家庄</option>
<option data-icon="♂" value="cd">成都</option>
<option data-icon="★" value="ht">HoverTree</option>
<option data-icon="◆" 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',
});

// automaticamente
pickout.updated('.city');
</script>
</body>
</html>

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航