搜索注册栏（注册弹出模态框）和富强民主的鼠标点击效果

<!doctype html>
<html><head><meta charset="utf-8"><title></title><link href="css/bootstrap.min.css" rel="stylesheet" /><link href="css/font-awesome.min.css" rel="stylesheet" /><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"></head>
<script type="text/javascript"> /* 鼠标特效 ，点击出现富强民主文明和谐的字*/
var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); });
</script><body><!--搜索注册栏--><div class="container-fluid"><nav class="navbar-form navbar-center" role="Search"><div class="col-lg-4"></div><div class="col-lg-4"><div class="input-group"><input type="text" class="form-control " placeholder="Search" onkeydown="onKeyDown(event)" style="width: 500px;"><span class="input-group-addon btn-lg"><a href="#"><i class="glyphicon glyphicon-search"><span>搜索</span></i></a></span></div></div><div class="col-lg-4"><button type="submit" class="btn-info btn-sm">登录</button><button type="button" class="btn-danger btn-sm">注销</button><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" >注册</button><!--注册的模态框--><div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">注册</h4></div><div class="modal-body"><div class="container"><div class="container"><label>手机号</label><input type="text" class="form-control" placeholder="请输入您的手机号" /></div><br /><div class="container"><label>姓名</label><input type="text" class="form-control" placeholder="请输入您的姓名" /></div><br /><div class="container"><label>邮箱</label><div class="input-group"><input class="text" class="form-control" style="width: 100px;" placeholder="请输入您的邮箱" /><span class="input-group-addon">@qq.com</span></div></div><br /><div class="container"><label>性别</label><label class="radio-inline"><input type="radio" />男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><label class="radio-inline"><input type="radio" />女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label></div><br /></div></div><!--body部分--><div class="modal-footer"><button class="btn btn-primary">提交</button><button class="btn btn-default" data-dismiss="modal">关闭</button></div></div></div></div><!--注册的模态框--></div> </nav><!--搜索注册条--></div></body>
</html>

页面效果

动态效果：

搜索注册栏（注册弹出模态框）和富强民主的鼠标点击效果相关推荐

html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
html单击按钮时弹出输入框,点击按钮弹出模态框的一系列操作代码实例
实现功能提交按钮功能: 点击提交按钮的时候都会弹出模态框,但是有不同的状态: 审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮审核状态已通过: ...
html点击图片弹出模态框,JS实现图片点击后出现模态框效果
JS实现图片点击后出现模态框效果 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了JS实现图片点击后出现模态框效果,编程之家小编觉得挺不错的 ...
bootstrap-table：操作栏点击编辑按钮弹出模态框修改数据
核心代码: columns: [{checkbox:true //第一列显示复选框 },...{field: 'fail_num',title: '失败数'},{field: 'operate',ti ...
IE浏览器的弹出模态框
很多时候做web项目需要用到模态框进行操作,关于IE浏览器的模态框最近做项目遇到了,在这里简单介绍一下,并给出一个小案例以下给出的模态框不兼容谷歌浏览器只针对IE浏览器: 一, window.sho ...
微信小程序自定义弹出模态框禁止底部滚动
图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> ...
微信小程序点击按钮实现弹出模态框
效果如下图 wxml如下: <button bindtap="popup">弹出</button><view cl ...
jQuery日期弹出选择框Datepicker效果
无论你是一个机票在线预定网站设计师,还是一个工程任务管理者,抑或在你的注册表单上有个生日填写项目:本文即将提到的日历日期选择弹出窗口都将帮助你简化用户操作,提高网站的用户体验和易用性. 教程目标:教会 ...
基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览源码下载实现的代码. html代码: <input type=&quo ...

搜索注册栏（注册弹出模态框）和富强民主的鼠标点击效果

搜索注册栏（注册弹出模态框）和富强民主的鼠标点击效果

搜索注册栏（注册弹出模态框）和富强民主的鼠标点击效果相关推荐

最新文章

热门文章