门户里面做的是angular工程，所以引用模态框十分的方便，但是登陆的界面，当初做的是jsp页面，所以并不能直接使用angular。
注意的问题，
原生使用change事件的时候，并不会立即触发，只有当input失去焦点的时候才会触发所以用原生的话，不要用change事件，使用
keyup、 keydown事件使用键盘事件，如果外层也有
enter回车监听，要阻止事件传递搜索功能，最好要有个
时间的等待，才去调接口搜索。否则立即触发的话，会很卡，服务器也承受不了，我目前写的是500毫秒。如果使用angular的话，ng-change、ng-keyxx事件，就立即触发，可以看下它的机制，不存在以上原生的问题。
下面就使用原生写的模态框如下：
- login.jsp文件，放html即可
请选择登录的租户
×
<%----%>
css样式 tenant-login-model.css
/*登陆选择租户模态框样式*/
.tenant-model{
display: none;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
background-color: rgba(0,0,0,0.5);
}
.tenant-model-content{
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
width: 50%;
/*max-width: 700px;*/
/*height: 40%;*/
max-height: 500px;
margin: 100px auto;
border-radius:10px;
background-color:#fff;
-webkit-animation: zoom 0.6s;
animation: zoom 0.6s;
/*resize: both;*/
/*overflow: auto;*/
}
@-webkit-keyframes zoom{
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes zoom{
from {transform: scale(0)}
to {transform: scale(1)}
}
.tenant-model-header{
height:50px;
box-sizing:border-box;
border-bottom:1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
#closeModel{
color: #b7b7b7;
font-size: 30px;
font-weight: bold;
margin-right: 20px;
transition: all 0.3s;
}
#closeModel:hover,#closeModel:focus{
color: #95b4ed;
text-decoration: none;
cursor: pointer;
}
.tenant-model-body{
padding: 10px;
font-size: 16px;
box-sizing:border-box;
}
.tenant-model-footer{
box-sizing:border-box;
border-top:1px solid #ccc;
display: flex;
padding: 15px;
justify-content: flex-end;
align-items: center;
}
.tenant-model-footer >button{
width: 60px;
height: 35px;
padding: 5px;
box-sizing: border-box;
margin-right: 10px;
font-size: 16px;
color: white;
border-radius: 5px;
background-color: cornflowerblue;
}
.tenant-model-footer button:hover,.tenant-model-footer button:focus{
background-color: #95b4ed;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.tenant-model-content {
width: 80%;
}
}
点 X 关闭，直接设置隐藏即可，如果隐藏记得把模态框的内容什么的初始化
$("#tenant-model-box").show();
$("#closeModel").click(function(){
$("#searchTenant").val("");
$("#divSelectLi").empty();
$("#tenant-model-box").hide();
});
li列表的样式
/*展示租户下拉框样式*/
#search-navbar {
margin: 0 10px;
/*position:relative;*/
font-size: 18px;
}
.search-nav-icon {
cursor:pointer;
color: #fff;
padding:0 20px 0 5px;
vertical-align: middle;
float: left;
}
.search-nav-input {
/*width: 85%;*/
width: 100%;
height: 40px;
font-size: 15px;
}
.search-input {
width: 100%;
/*border: none;*/
padding: 2px 2px 2px 8px;
}
.search-result {
background-color: #fff;
height:320px;
max-height:300px;
/*overflow-y: auto;*/
overflow-y: scroll;
/*overflow-y: hidden;*/
clear: both;
position: relative;
color:#fff;
width: 100%;
}
.search-animation {
animation:searchResult 0.5s;
}
@keyframes searchResult
{
from {opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes searchResult /* Safari and Chrome */
{
from {opacity:0;}
to {opacity:1;}
}
.search-result-title {
color: #000;
padding: 20px 0 0 30px;
}
.top-search-i {
margin:0 10px;
}
.search-nav {
height:50px;
background-color: #438EB9;
padding: 0 20px;
padding-top:7px;
zoom: 1;
}
.search-nav:after {
content:"";
display: block;
height:0;
clear: both;
visibility: hidden;
}
.search-ul {
/*max-height: 515px;*/
overflow-y: auto;
padding: 5px 10px 10px 20px;
}
.search-ul li {
color: #000;
box-sizing: content-box;
font-size: 14px;
height: 30px;
line-height: 30px;
margin-top:5px;
background: #f5f5f5;
border-left:2px solid transparent;
}
.search-ul li:nth-of-type(odd) {
background-color: #f9f9f9;
}
.search-ul li:hover {
border-left:2px solid #ff9900 !important;
background-color: #f5f5f5;
cursor: pointer;
}
.search-text {
height: 30px;
line-height: 30px;
display: inline-block;
}
.search-ul .search-select {
border-left:2px solid #ff9900;
}
.search-result-footer {
margin: 0 20px 0 0;
float: right;
color: #000;
}
.search-ul li i {
font-size: 15px;
margin:0 10px;
vertical-align: middle
}
.search-type {
color: #fff;
float: right;
font-size: 12px;
background: #438eb9;
height: 19px;
line-height: 19px;
vertical-align: middle;
/*position: relative;*/
/*top: 6px;*/
/*right: 17px;*/
margin-top: 6px;
margin-right: 17px;
border-radius: 4px;
padding: 0 8px;
box-shadow: 1px 1px #94949d;
}
/* 滚动条 */
.search-ul::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/
width: 5px;
background-color: #CCCCCC;
-webkit-border-radius: 6px;
}
.search-ul::-webkit-scrollbar-track-piece {
background-color: #fff; /*滚动条的背景颜色*/
-webkit-border-radius: 0; /*滚动条的圆角宽度*/
}
.search-ul::-webkit-scrollbar {
width: 10px; /*滚动条的宽度*/
height: 8px; /*滚动条的高度*/
}
.search-ul::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
height: 50px;
background-color: #999;
-webkit-border-radius: 4px;
outline: 2px solid #fff;
outline-offset: -2px;
border: 2px solid #fff;
}
.search-ul::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/
height: 50px;
background-color: #9f9f9f;
-webkit-border-radius: 4px;
}
效果
model1.png
选中li的样式
/*选中li*/
.gr{
background: #d6e9f6 !important;
}
/*caps lock 大写键盘锁定样式*/
.caps-lock-css{
margin-left: 44px;
border: 1px solid #ccc;
height: 28px;
width: 120px;
line-height: 28px;
padding-left: 10px;
border-radius: 5px;
margin-top: -2px;}
.caps-lock-css em,.caps-lock-css span{
display:block;
width:30px;
height:16px;
font-size:30px;
overflow:hidden;
position:relative;
margin-left:-5px;}
.caps-lock-css em{
margin-top:-41px;
color:#ccc;
font-style:normal;}
.caps-lock-css span{
margin-top:-14px;
color:white;}
生成li
function getTenantList(){
var loginUserId = $("#username").val().trim();
var tName = $("#searchTenant").val().trim()? $("#searchTenant").val().trim():"";
var lastLoginTenantId = localStorage.getItem("LoginUserId_"+loginUserId);
var param1 = {
service: "BC23",
method: "getTenantList",
eiinfo: '{attr:{"service":"BC23","method":"getTenantList","limit":"-1","offset":"0","showCount":"true","tenantName":"'+tName+'"},blocks:{}}'
};
$.ajax(
{
type: "POST",
async: false,
url: CONTEXT_PATH + "/EiService",
data: param1,
dataType: "json",
success: function (result) {
var resultStatus = result.status;
if(resultStatus=='0') {
var allCount = result.attr.count;
$("#showTenantListCount").html(allCount);
var dataset = result.attr.tenants;
if(dataset.length == '0'){
var createLi = ''+
'
'+
'没有查询到符合条件的记录'+
'
';
$("#divSelectLi").append(createLi);
}
if(lastLoginTenantId){
var obj = {};
for(var i = 0; i < dataset.length; i++){
if(dataset[i].tenantID == lastLoginTenantId){
obj =dataset[i];
dataset.splice(i,1);
dataset.unshift(obj)
}
}
}
for (var i = 0; i < dataset.length; i++) {
if ('社会' == dataset[i].tenantGroupType) {
color = "#ef8c00";
}
if ('企业' == dataset[i].tenantGroupType) {
dataset[i].color = "#43a300";
}
if ('宝钢' == dataset[i].tenantGroupType) {
dataset[i].color = "#0043a3";
}
if ('欧冶' == dataset[i].tenantGroupType) {
dataset[i].color = "#e60012";
}
var createLi = '' +
'' +
'' + dataset[i].tenantName + ' ' +
'' +
'' + dataset[i].tenantGroupType + '' +
' ';
$("#divSelectLi").append(createLi);
}
}
},
error: function (xmlR, status, e) {
console.log(e);
}
});
}
输入框添加键盘事件、上移、下移、回车选中
// 初始化目标索引
var selectIndex = -1;
$("#searchTenant").focus();
//$(document).keydown(function(event){
//$(document).keyup(function(event){
$("#searchTenant").keyup(function(event){
var target = event.target;
var selectUi = document.getElementById("divSelectLi");
//取得li的元素
var selectList = document.getElementsByClassName("search-li-tenant");
for(var i=0;i 0){
$("#divSelectLi li").removeClass("gr");
$("#divSelectLi li:nth-child(" + (selectIndex + 1) + ")").addClass("gr");
var id = $("#divSelectLi .search-li-tenant .selectTenantIdLi")[selectIndex].innerHTML;
var loading = '
正在登录中，请等待...';
$("#divSelectLi li:nth-child(" + (selectIndex + 1) + ")").children(".addLoding").empty().append(loading);
localStorage.setItem("LoginUserId_"+loginUserId, id);
loginClick(id);
}
//selectIndex = -1;
}
break;
default:
setTimeout(function(){
$("#divSelectLi").empty();
if ($("#divSelectLi li").length == 0) {
getTenantList();
}
},500);
break;
}
if(selectIndex < 7){
$(".search-result")[0].scrollTop = 0;
}else if(selectIndex < $("#divSelectLi li").length){
$(".search-result")[0].scrollTop = (selectIndex-7)*36;
}else{
selectIndex = -1;
$(".search-result")[0].scrollTop = 0;
}
if(selectIndex>=0){
$("#divSelectLi li:nth-child("+(selectIndex+1)+")").css("borderLeftColor","#ff9900");
}
});
// 防止搜索过后 鼠标click事件不触发
$("#searchTenant").blur(function(){
$("#divSelectLi li").click(function(){
$("#divSelectLi li").removeClass("gr");
var loading = '正在登录中，请等待...';
$(this).addClass("gr");
var id = $(this).children(".selectTenantIdLi").html();
$(this).children(".addLoding").empty().append(loading);
localStorage.setItem("LoginUserId_"+loginUserId, id);
loginClick(id);
});
});
键盘搜索之后，鼠标click事件不会触发
目前我换没找到问题所在，写的jq click，放在任何地方搜索之后都不触发，我在想是不是触发的时候，并没有生成这个dom节点，但是jq的机制它又没问题，有dom就触发，没dom也不会像js那样报错。
- 放在任何地方的click事件，不使用搜索功能会触发，否则并不会触发
$("#divSelectLi li").click(function(){
$("#divSelectLi li").removeClass("gr");
var loading = '正在登录中，请等待...';
$(this).addClass("gr");
var id = $(this).children(".selectTenantIdLi").html();
$(this).children(".addLoding").empty().append(loading);
localStorage.setItem("LoginUserId_"+loginUserId, id);
loginClick(id);
});
- 后来我调试，把click事件，放在了input搜索框失去焦点的时候触发，这样不管是否使用搜索，都能触发click
// 防止搜索过后 鼠标click事件不触发
$("#searchTenant").blur(function(){
$("#divSelectLi li").click(function(){
$("#divSelectLi li").removeClass("gr");
var loading = '正在登录中，请等待...';
$(this).addClass("gr");
var id = $(this).children(".selectTenantIdLi").html();
$(this).children(".addLoding").empty().append(loading);
localStorage.setItem("LoginUserId_"+loginUserId, id);
loginClick(id);
});
});
modelclick .png