JS实现微信弹出搜索框 多条件查询功能
时间：2021-04-14 09:05:28|栏目：JavaScript代码|点击： 次
效果图如下所示：
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>
