JS实现微信弹出搜索框 多条件查询功能

效果图如下所示：

JS实现微信弹出搜索框 多条件查询功能的实现代码如下所示：

<!--<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/views/include/mtaglib.jsp"%>-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-type" name="viewport"
  content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection">
<title>百望云票</title>
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/example.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
</script>
<style>
  #kongzhi{
   position: relative;
   left: -20px;
   top: -30px;
  }
  .weui-dialog{
   width: 400px;
   height: 315px;
  }
  .weui-cell__bd input{
   width: 150px;
  }
</style>
</head>
<body>
  <!-- 内容 -->
  <div id="container" class="container">
   <div class="page input js_show">
     <div class="page__hd">
     </div>
     <div class="page__bd">
      <div class="weui-cell__ft">
        <a href="javascript:;" class="showIOSDialog2">
        点我弹出搜索框 点我 点我
        </a>
      </div>
     </div>
   </div>
   <!--弹出层begin-->
     <div id="dialogs">
      <div class="js_dialog" id="iosDialog2" style="opacity: 1; display: none;">
        <div class="weui-mask">
        </div>
        <div class="weui-dialog">
         <div class="weui-dialog__bd">
           <div id="kongzhi">
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">发票代码:</label></div>
              <div class="weui-cell__bd">
               <input class="weui-input" placeholder="输入发票代码.....">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">发票号码:</label></div>
              <div class="weui-cell__bd">
               <input class="weui-input" placeholder="输入发票号码.....">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">买方名称:</label></div>
              <div class="weui-cell__bd">
               <input class="weui-input" placeholder="购买方名称.....">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label for="" class="weui-label">开始日期:</label></div>
              <div class="weui-cell__bd">
               <input class="weui-input" type="date" value="">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label for="" class="weui-label">结束日期:</label></div>
              <div class="weui-cell__bd">
               <input class="weui-input" type="date" value="">
              </div>
            </div>
           </div>
         </div>
         <div class="weui-dialog__ft">
           <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
           <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
         </div>
        </div>
      </div>
     </div>
   <!--弹出层end-->
   </div>
  </div>
</body>
<script type="text/javascript" class="dialog js_show">
  $(function(){
    var $iosDialog2 = $('#iosDialog2');
    $('#dialogs').on('click', '.weui-dialog__btn', function(){
      $(this).parents('.js_dialog').fadeOut(200);
    });
    $('.showIOSDialog2').on('click', function(){
      $iosDialog2.fadeIn(200);
    });
  });
</script>
</html>

以上所述是小编给大家介绍的JS实现微信弹出搜索框 多条件查询功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript微信定位功能实现方法

    分享下微信是如何定位的: 本文主要讲解如何利用微信定位,如何将定位到的经纬度转换为百度地图对应的经纬度,以及处理定位失败.取消及错误时的默认做法. //获取地理位置信息start //封装成一个函数 function getPosition() { //用ajax请求 $.ajax({ url: "/wechat/jssdk",//请求地址 type: 'post',//post请求 dataType: 'json', contentType: "application/x-

  • 微信小程序 基础知识css样式media标签

    微信小程序 基础知识css样式media标签 前言: 微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需 在css中我们使用media标签来区分调用哪个css样式,比如使用media="print"来表示当执行打印文档时,使用print.css样式.这样使得文档更有得于打印,如将页面宽度增宽.或屏蔽掉一些不需要打印的内容. <link href="styles/main.css"

  • JS 调用微信扫一扫功能

    JS 调用微信扫一扫功能

    1.第一步: 设置调用微信js安全域名,就可以在该域名下调用微信的js接口 2.第二步: 将下面的js附在需要调用微信扫一扫的页面上,前提是需要引入微信的js[] 3.第三步: 参考官方文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=876521668&lang=zh_CN 通过后台获取js权限签名jsapi_ticket[参考文档:http://mp.weixin.qq.com/

  • js仿微信公众平台打标签功能

    js仿微信公众平台打标签功能

    今天刚刚完成了一个小功能:"仿微信公众平台的-打标签",随笔记下欢迎纠错: 操作介绍:选择人物列表点击"打标签"按钮可实现对当前已选择的人物添加新的标签: 自己分析的实现思路: 1.点击"打标签"时要"知道"那些人物被选择了~~遍历当前人物列表 2.得到被选择人物列表后还得知道他们下面的标签都有啥~~遍历选择人物的标签列表 3.得到当前可以使用的标签列表~~额..还是遍历得到 废话讲的有点多.来几张图片压压惊.网页效果\(^o

  • JS中静态页面实现微信分享功能

    微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面.我使用phpcms把页面生成了静态文件,示例代码就起不到作用了.在网上找了下,有大神使用ajax实现静态页面也能实现微信分享功能,在这里分享给大家. 前台代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> url=locatio

  • JS实现微信弹出搜索框 多条件查询功能

    JS实现微信弹出搜索框 多条件查询功能

    效果图如下所示: JS实现微信弹出搜索框 多条件查询功能的实现代码如下所示: <!--<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ include file="/WEB-INF/views/include/mtaglib.jsp"%>--> <!DOCTYPE html> <

  • 微信小程序自定义弹出模态框禁止底部滚动功能

    图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> <view class='active' bindtap="showDialogBtn">立即报名</view> </view> <!--模态框--> <!-- 遮罩层 --> <view class="mod

  • JS模拟Dialog弹出浮动框效果代码

    JS模拟Dialog弹出浮动框效果代码

    本文实例讲述了JS模拟Dialog弹出浮动框效果代码.分享给大家供大家参考.具体如下: 这里演示JS模拟Dialog弹出浮动框,蓝色经典风格,可以创建一个新层,可设置弹出层的标题和内容,用它可实现一个登录框,或用在后台管理中. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-dialog-float-dlg-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • jquery右下角弹出提示框示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • C#实现客户端弹出消息框封装类实例

    本文实例讲述了C#实现客户端弹出消息框封装类.分享给大家供大家参考.具体如下: asp.net在服务器端运行,是不能在服务器端弹出对话框的,但是C#可以通过在页面输出JS代码实现弹出消息框的效果,这个C#类封装了常用的消息框弹出JS代码,可以在服务器端调用,在客户端显示对话框.不但可以显示JS的警告框,还可以显示模式窗口,非常方便. using System; using System.Web; using System.Web.UI; using System.Web.UI.WebContro

  • 微信小程序实现底部弹出模态框

    本文实例为大家分享了微信小程序实现底部弹出模态框的具体代码,供大家参考,具体内容如下 代码: <view class="modals modals-bottom-dialog" hidden="{{hideModal}}" style="width:100%;height:{{widheight}}px"> <view class="modals-cancel" bindtap="hideModal

  • JS实现刷新父页面不弹出提示框的方法

    本文实例讲述了JS实现刷新父页面不弹出提示框的方法.分享给大家供大家参考,具体如下: A页面 open方式出 B页面 ,当B页面做了类如保存动作后,需要关闭B页面,刷新A页面的情况下,会弹出一个提示框,要求点重试,这个就是发生预料之外的情况,用户体验很差. 解决方案分两种情况: 1.A页面很简单的情况(没有frame/iframe) 在B页面中的function中: function close(){ window.opener.location.reload(); window.opener

  • JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关

  • js中confirm实现执行操作前弹出确认框的方法

    本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在删除或其它操作前弹出确定提示,我们有很多方法,最基本的就是利用js自带的函数confirm来操作了 最简单的用法如下: 鼠标事件使用confirm 复制代码 代码如下: <a href="#" onclick= "if(confirm( '是否确定! ')==false)return   false; ">点击确定</a> 想简单

  • JS实现单击输入框弹出选择框效果完整实例

    JS实现单击输入框弹出选择框效果完整实例

    本文实例讲述了JS实现单击输入框弹出选择框效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

随机推荐