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

2019-11-19 18:31:18

字体：大中小

来源：转载

供稿：网友

效果图如下所示：

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

上一篇：微信页面倒计时代码（解决safari不兼容date的问题）

下一篇：根据输入邮箱号跳转到相应登录地址的解决方法