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="♠" 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
JS弹出模态窗口下拉列表特效的更多相关文章
- JS 弹出模态窗口解决方案
最近在项目中使用弹出模态窗口,功能要求: (1)模态窗口选择项目 (2)支持选择返回事件处理 在IE中有showModalDialog 方法,可以很好的解决该问题,但是在Chrome中和FF中就有问题 ...
- 2019-6-23-WPF-解决弹出模态窗口关闭后,主窗口不在最前
title author date CreateTime categories WPF 解决弹出模态窗口关闭后,主窗口不在最前 lindexi 2019-06-23 11:48:38 +0800 20 ...
- WPF 解决弹出模态窗口关闭后,主窗口不在最前
本文告诉大家如何解决这个问题,在 WPF 的软件,弹出一个模态窗口.使用另一个窗口在模态窗口前面.从任务栏打开模态窗口.关闭模态窗口.这时发现,主窗口会在刚才使用的另一个窗口下面 这是 Windows ...
- js 弹出div窗口 可移动 可关闭 (转)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JS弹出子窗口
目的 在一个主窗口中,点击一个链接, 弹出一个子窗口 , 父窗口保留 在子窗口中点击关闭, 关闭子窗口. 子窗口的位置位于屏幕的中间 实现 main.html <!DOCTYPE html> ...
- js 弹出div窗口 可移动 可关闭
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JS 弹出小窗口
弹出窗口函数 function openwindow(url,name,iWidth,iHeight){ var url; //转向网页的地址; var name; //网页名称,可为空; var i ...
- js弹出对话框的方法总结
九种js弹出对话框的方法总结,需要的朋友可以参考一下 [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE=" ...
- js 弹出对话框的方法总结
原文:http://www.cnblogs.com/xiaofengfeng/archive/2012/10/20/2732784.html <!DOCTYPE html PUBLIC &quo ...
随机推荐
- 【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- 在C#代码中应用Log4Net(五)将Log4Net正确地封装在自己的类库中并进行调用
前面的几篇文章已经比较完整地解释了怎么使用Log4Net,但是我们可能需要将Log4Net的日志类封装在自己的类库中,以便C/S或B/S程序进行调用.下面的示例程序简单地分为两层,一个是应用程序层We ...
- MySQL MMM高可用方案
200 ? "200px" : this.width)!important;} --> 介绍 本篇文章主要介绍搭建MMM方案以及MMM架构的原理.这里不介绍主从.主主的搭建方 ...
- ASP.NET MVC 路由(四)
ASP.NET MVC路由(四) 前言 在前面的篇幅中我们讲解路由系统在MVC中的运行过程以及粗略的原理,想必看过前面篇幅的朋友应该对路由有个概念性的了解了,本篇来讲解区域,在读完本篇后不会肯定的让你 ...
- Oracle 把秒转成时分秒格式(hh24:mm:ss);检测字符串是否是数字;字符串转换为数字
不说废话,贴代码: CREATE OR REPLACE FUNCTION to_time(sec IN NUMBER) RETURN VARCHAR2 IS /*把秒转成时分秒格式 auth lzpo ...
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...
- 【Win10 应用开发】人脸识别
可能你会认为人脸识别用起来会很复杂,老周当初也这么想,但通过实际操作后,我发现非然. 经过微软封装的东西,向来都是复杂问题简单化,只要用得舒心,代码越少越好,用最少的代码做最多的事情,此为大师境界也. ...
- OpenCASCADE DataExchange DWG
OpenCASCADE DataExchange DWG eryar@163.com Abstract. DWG is a file format created in the 70’s for th ...
- MVC4做网站后台:栏目管理1、添加栏目
把栏目添加删除跟前台混在一起结构清晰,现在有了后台管理的区域就把后台管理相关的代码分开. 要实现功能: 1.添加栏目 2.删除栏目 3.修改栏目信息 -- 一.开始 1.添加 接口InterfaceC ...