弹出框兼容IE5-IE11

最新推荐文章于 2021-06-23 21:00:08 发布

wzw1021

最新推荐文章于 2021-06-23 21:00:08 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：弹出框兼容IE5-IE11

本文链接：https://blog.csdn.net/wzw1021/article/details/72885991

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@page contentType="text/html; charset=gb2312" %>
<%@ taglib prefix="tiles" uri="http://jakarta.apache.org/struts/tags-tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ include file="common/wp_common_js.jsp"%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#popwindows {
width: 600px;
color: #333;
font-size: 14px;
border: 1px solid #3287ae;
border-radius: 5px;
display: table;
background-color: #f5f5f5;
}
#popwindows input, #popwindows select, #popwindows button {
font-size: 14px;
font-family: Arial, "Microsoft YaHei";
}
#popwindows input[type="text"], #popwindows select {
width: 120px;
padding: 4px 5px;
border: 1px solid #ddd;
}
#popwindows select {
padding: 3px 5px;
}
#popwindows button {
width: 90px;
color: #fff;
border: 0;
background-image: transparent;
background-color: #3287ae;
border-radius: 5px;
padding: 5px;
+padding: 1px;
_padding: 1px;
cursor: pointer;
}
#popwindows h5 {
font-size: 14px;
margin: 20px 20px 10px 20px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
.popTitle {
height: 40px;
line-height: 40px;
color: #fff;
font-size: 16px;
font-family: Arial, "Microsoft YaHei";
text-indent: 20px;
background-color: #3287ae;
border-radius: 5px 5px 0 0;
}
.searchBar {
width: 100%;
margin: 10px 20px;
}
.searchBar div {
height: 32px;
margin-right: 15px;
margin-bottom: 10px;
float: left;
}
.searchBar label {
height: 24px;
line-height: 25px;
vertical-align: top;
margin-right: 10px;
display: inline-block;
margin-left:-56px;
}
.searchBar span {
margin-top: 5px;
}
.searchKey {
height: 80px;
border: 1px solid #ddd;
background-color: #eee;
padding: 5px;
clear: both;
margin: 20px;
}
.searchKey span {
margin-right: 5px;
}
.searchKey b {
max-width: 140px;
font-weight: 400;
vertical-align: top;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.searchKey i {
width: 16px;
height: 16px;
background: url(/asset/wp/icon/labelClose.png) no-repeat center;
margin-left: 5px;
display: inline-block;
cursor: pointer;
}
.iconStyle {
margin: 0 20px;
}
.iconStyle label {
width: 100px;
height: 80px;
margin: 5px 3px;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
.iconStyle input {
width: 16px;
height: 16px;
}
.iconStyle01 {
background: #62baf8 url(/asset/wp/icon/iconStyle01.png);
}
.iconStyle02 {
background: #afd25f url(/asset/wp/icon/iconStyle02.png);
}
.iconStyle03 {
background: #ffb366 url(/asset/wp/icon/iconStyle03.png);
}
.iconStyle04 {
background: #ef5454 url(/asset/wp/icon/iconStyle04.png);
}
.iconStyle05 {
background: #c674ed url(/asset/wp/icon/iconStyle05.png);
}

.iconStyle06 {
background: #227ab8 url(/asset/wp/icon/iconStyle06.png);
}
.iconStyle07 {
background: #6f921f url(/asset/wp/icon/iconStyle07.png);
}
.iconStyle08 {
background: #bf7326 url(/asset/wp/icon/iconStyle08.png);
}
.iconStyle09 {
background: #af1414 url(/asset/wp/icon/iconStyle09.png);
}
.iconStyle10 {
background: #8634ad url(/asset/wp/icon/iconStyle10.png);
}
.popfooter {
margin: 20px 0;
text-align: center;
}
.popfooter button {
margin: 0 10px;
}
.btnCancel {
color: #999 !important;
background-color: #eee !important;
}
</style>

</head>

<body>
<input type="hidden" id="jsonList" value="<c:out value='${jsonArray}'/>"/>
<div id="popwindows">
<div class="popTitle">新建自定义菜单</div>
<h5>添加快捷链接</h5>
<div class="popContent">
<div class="searchBar">
<p><label>自定义菜单名称</label><span><input type="text" /></span></p>
<div><span>
<select id="fristMenu" οnchange="initSecondMenu()">
<c:forEach var="frist" varStatus="i" items="${customMenuList}">
<option value="<c:out value='${frist.menuId}' />"><c:out value='${frist.text}' /></option>
</c:forEach>
</select>
</span></div>
<div><span><select id="secondMenu" οnchange="initLastMenu()"></select></span></div>
<div><span><select id="lastMenu"></select></span></div>
<div><button>添加</button></div>
</div>
<div class="searchKey">
<span><b>关键字关键字关键字关键</b><i></i></span>
<span><b>关键字2</b><i></i></span>
<span><b>关键字3</b><i></i></span>
</div>
<h5>选择图标样式</h5>
<div class="iconStyle">
<label class="iconStyle01"><input type="radio" name="iconGroup" value="1" checked="checked" /></label>
<label class="iconStyle02"><input type="radio" name="iconGroup" value="2" /></label>
<label class="iconStyle03"><input type="radio" name="iconGroup" value="3" /></label>
<label class="iconStyle04"><input type="radio" name="iconGroup" value="3" /></label>
<label class="iconStyle05"><input type="radio" name="iconGroup" value="3" /></label>

<label class="iconStyle06"><input type="radio" name="iconGroup" value="3" /></label>
<label class="iconStyle07"><input type="radio" name="iconGroup" value="3" /></label>
<label class="iconStyle08"><input type="radio" name="iconGroup" value="3" /></label>
<label class="iconStyle09"><input type="radio" name="iconGroup" value="3" /></label>
<label class="iconStyle10"><input type="radio" name="iconGroup" value="3" /></label>
</div>
</div>
<div class="popfooter"><button>保存</button><button class="btnCancel">取消</button></div>
</div>

</body>
<script src="/asset/wp/pcreview/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jsonList = $("#jsonList").val();
var myobj=eval(jsonList);
initSecondMenu();
initLastMenu();
function initSecondMenu(){
$("#secondMenu option").remove();
$("#lastMenu option").remove();
var menuid = $("#fristMenu option:selected").val();
for(var i=0;i<myobj.length;i++){
if(myobj[i].menuId==menuid){
for(var k=0;k<myobj[i].childNodeList.length;k++){
$("#secondMenu").append("<option value='"+myobj[i].childNodeList[k].menuId+"'>"+myobj[i].childNodeList[k].text+"</option>");
}
break;
}
}
initLastMenu();
}

function initLastMenu(){
$("#lastMenu option").remove();
var menuid = $("#secondMenu option:selected").val();
for(var i=0;i<myobj.length;i++){
for(var k=0;k<myobj[i].childNodeList.length;k++){
if(myobj[i].childNodeList[k].menuId==menuid){
for(var m=0;m<myobj[i].childNodeList[k].childNodeList.length;m++){
$("#lastMenu").append("<option value='"+myobj[i].childNodeList[k].childNodeList[m].menuId+"'>"+myobj[i].childNodeList[k].childNodeList[m].text+"</option>");
}
break;
}
}
}
}

</script>
</html>

wzw1021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
弹出框兼容IE5-IE11

无标题文档#popwindows {width: 600px;color: #333;font-size: 14px;border: 1px solid #3287ae;border-radius: 5px;display: table;background-color: #f5f5f5;}#popwindows input, #popwindows s
复制链接

扫一扫