效果体验：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="☺" 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

JS弹出模态窗口下拉列表特效的更多相关文章

  1. JS 弹出模态窗口解决方案

    最近在项目中使用弹出模态窗口,功能要求: (1)模态窗口选择项目 (2)支持选择返回事件处理 在IE中有showModalDialog 方法,可以很好的解决该问题,但是在Chrome中和FF中就有问题 ...

  2. 2019-6-23-WPF-解决弹出模态窗口关闭后，主窗口不在最前

    title author date CreateTime categories WPF 解决弹出模态窗口关闭后,主窗口不在最前 lindexi 2019-06-23 11:48:38 +0800 20 ...

  3. WPF 解决弹出模态窗口关闭后，主窗口不在最前

    本文告诉大家如何解决这个问题,在 WPF 的软件,弹出一个模态窗口.使用另一个窗口在模态窗口前面.从任务栏打开模态窗口.关闭模态窗口.这时发现,主窗口会在刚才使用的另一个窗口下面 这是 Windows ...

  4. js 弹出div窗口 可移动 可关闭 （转）

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. JS弹出子窗口

    目的 在一个主窗口中,点击一个链接, 弹出一个子窗口 , 父窗口保留 在子窗口中点击关闭, 关闭子窗口. 子窗口的位置位于屏幕的中间 实现 main.html <!DOCTYPE html> ...

  6. js 弹出div窗口 可移动 可关闭

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. JS 弹出小窗口

    弹出窗口函数 function openwindow(url,name,iWidth,iHeight){ var url; //转向网页的地址; var name; //网页名称,可为空; var i ...

  8. js弹出对话框的方法总结

    九种js弹出对话框的方法总结,需要的朋友可以参考一下 [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE=" ...

  9. js 弹出对话框的方法总结

    原文:http://www.cnblogs.com/xiaofengfeng/archive/2012/10/20/2732784.html <!DOCTYPE html PUBLIC &quo ...

随机推荐

  1. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  2. 搭建前端私有npm杂记

    随着前端队伍越来越壮大,项目间共享代码就变得尤为重要.常用的框架/类库没必要在每个项目都放一份,团队内部产出的公共模块也需要有合理的共享机制.现在,用npm管理前端代码已经是业界趋势.楼主尝试用私有n ...

  3. 黑科技：gif二维码

    本篇文章是缘于在微博上看到了一的有意思的东西.由于腾讯与阿里的竞争关系,如果你是一个大V,在微博上发布微信的二维码会被屏蔽掉.于是有人发现了这样一个现象:人眼有视觉暂留效应,手机的摄像头由于捕捉影像的 ...

  4. 代码提交的时候可以插入表情了-GitHub表情的使用

    GitHub官方有个表情项目,旨在丰富文字信息.意味着你可以在提交代码的时候,在提交信息里面添加表情,同时也可以在项目的ReadMe.md文件里面使用表情.除此之外,当然还有项目在GitHub上的wi ...

  5. [SDK2.2]SQL Azure (13) Azure的两种关系型数据库服务：SQL Azure与SQL Server VM的不同

    <Windows Azure Platform 系列文章目录> 如果熟悉Windows Azure平台的用户不难发现,对于SQL Server数据库来说,微软提供了两种服务,分别是: -W ...

  6. Base64编码原理分析

    Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,在了解Base64编码之前,先了解几个基本概念:位.字节. 位:"位(bit)"是计算机中最小的数据单位.每一位 ...

  7. 服务器.htaccess 详解以及 .htaccess 参数说明（转载）

    htaccess文件(或者”分布式配置文件”)提供了针对目录改变配置的方法, 即,在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.作为用户,所能使用的命令受到限 ...

  8. LINQ系列：LINQ to SQL Group by/Having分组

    1. 简单形式 var expr = from p in context.Products group p by p.CategoryID into g select g; foreach (var ...

  9. 【WP开发】加密篇：单向加密

    单向加密,简单地说就是对数据进行哈希处理,平时我们见得较多的有MD5.SHA1等,都属于单向加密.上一篇文章中,老周跟大家扯了有关双向加密的事,本文咱们就扯一下单向加密吧. 要对数据进行哈希处理也不是 ...

  10. AngularJS之WebAPi上传（十）

    前言 前面一系列我们纯粹是讲AngularJS,在讲一门知识时我们应该结合之前所学综合起来来做一个小的例子,前面我们讲了在MVC中上传文件的例子,在本节我们讲讲如何利用AngularJS在WebAPi ...