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

更新时间：2016年12月13日 16:02:26 作者：merrylilili

这篇文章主要介绍了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实现微信弹出搜索框多条件查询功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

JavaScript实现浏览器网页自动滚动并点击的示例代码
这篇文章主要介绍了JavaScript实现浏览器网页的自动滚动并点击的示例代码，帮助大家更好的理解和学习JavaScript的使用，感兴趣的朋友可以了解下
2020-12-12
JS操作JSON要领详细总结
JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包，下面与大家分享下JSON操作的相关知识
2013-08-08
通过javascript实现扫雷游戏代码实例
这篇文章主要介绍了通过javascript实现扫雷游戏代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
javascript 设计模式之享元模式原理与应用详解
这篇文章主要介绍了javascript 设计模式之享元模式,结合实例形式详细分析了javascript 设计模式之享元模式相关概念、原理、应用方法及操作注意事项,需要的朋友可以参考下
2020-04-04
JS实现浏览器状态栏文字从右向左弹出效果代码
这篇文章主要介绍了JS实现浏览器状态栏文字从右向左弹出效果,涉及JavaScript结合时间函数遍历字符串及动态改变状态栏显示效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
解析Javascript中中括号“[]”的多义性
这篇文章主要介绍了Javascript中中括号“[]”的多义性。需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
js数组的操作详解
用js有很久了，但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。对于字符的处理很多情况下需要用到数组
2013-03-03
JS实现超简单的汉字转拼音功能示例
这篇文章主要介绍了JS实现超简单的汉字转拼音功能,结合实例形式分析了javascript汉字转换成拼音的函数定义与使用技巧,需要的朋友可以参考下
2016-12-12
使用JS正则表达式替换括号,尖括号等
下面小编就为大家带来一篇使用JS正则表达式替换括号,尖括号等。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
Node调试工具JSHint的安装及配置教程
Node的优势我就不再乱吹捧了，它让javascript统一web的前后台成为了可能。但是对于新手来说，server端的JS代码可能不像client端的代码那么好调试，直观。client端JS代码的调试基本上经历了一个从“肉眼--alert()--firebug(或者其它的developer tools)”的一个过程。而对于server端的调试，可能新手仍然停留在使用“肉眼--console()”的阶段。其实，Node经过了这么多年（虽然才短短几年）的发展，也有了很多不错的第三方的调试工具。包括Node内建的调试工具debugger、node-inspector等。
2014-05-05