1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>模态框</title> 9 <style> 10 #MenueSttings{ 11 font-size:18px ; 12 position: absolute; 13 right: 0; 14 top: 50%; 15 width: 70px; 16 height: 18px; 17 transform: translateY(-50%); 18 } 19 * { 20 box-sizing: border-box; 21 padding: 0; 22 margin: 0; 23 -moz-user-select: none; 24 -webkit-user-select: none; 25 -ms-user-select: none; 26 -khtml-user-select: none; 27 user-select: none; 28 } 29 30 #modalbox { 31 z-index: 9999; 32 width: 700px; 33 height: 600px; 34 position: fixed; 35 top: 50%; 36 left: 50%; 37 transform: translate(-50%, -50%); 38 /* display: none; */ 39 border-radius: 12px; 40 } 41 42 #modalbox .button { 43 width: 100%; 44 height: 525px; 45 overflow: hidden; 46 padding: 30px 10% 0 10%; 47 border: 3px solid #ccc; 48 border-top: none; 49 border-radius: 0 0 12px 12px; 50 } 51 52 #modalbox .top { 53 height: 60px; 54 background-color: #003c8d; 55 color: #fff; 56 padding-left: 20px; 57 line-height: 60px; 58 font-size: 25px; 59 font-weight: 600; 60 border-radius: 12px 12px 0 0; 61 position: relative; 62 } 63 64 #modalbox .button .allMenu, 65 #modalbox .button .CommonMenu { 66 width: 45%; 67 height: 436px; 68 border: 1px solid #000; 69 float: left; 70 border-radius: 6px; 71 } 72 73 #modalbox .button .title, 74 #modalbox .button .serch { 75 height: 40px; 76 line-height: 40px; 77 background-color: #f2f2f2; 78 font-weight: 600; 79 padding-left: 10px; 80 color: #003c8d; 81 border-bottom: 2px solid #ccc; 82 border-radius: 6px 6px 0 0; 83 } 84 .guanbimotaikaung{ 85 position: absolute; 86 width: 35px; 87 height: 35px; 88 background-color: #003c8d ; 89 color: #fff; 90 top: -17.5px; 91 right: -17.5px; 92 text-align: center; 93 line-height: 34px; 94 border-radius: 50%; 95 border: 2px solid #fff; 96 font-size: 16px; 97 cursor: default; 98 } 99 100 #modalbox .button .title { 101 top: 0; 102 left: 0; 103 width: 100%; 104 } 105 106 #modalbox .button .serch input { 107 width: 60%; 108 border-radius: 7px; 109 height: 25px; 110 margin-top: 3px; 111 border: 2px solid #003c8d; 112 padding-left: 3px; 113 outline: none; 114 } 115 116 #modalbox .allMenuliat { 117 height: 350px !important; 118 } 119 120 #modalbox .button .serch .serchbtn { 121 border: none; 122 outline: none; 123 width: 60px; 124 height: 25px; 125 background-color: #003c8d; 126 color: #fff; 127 border-radius: 10px; 128 text-align: center; 129 } 130 131 #modalbox .button .serch .serchbtn:active, 132 #modalbox .button .btn .save:active { 133 background-color: #124994; 134 border: 1px solid skyblue; 135 } 136 137 #modalbox .button .CommonMenu { 138 float: right; 139 position: relative; 140 } 141 142 #modalbox .button .btn { 143 width: 100%; 144 overflow: hidden; 145 padding-top: 10px; 146 text-align: center; 147 } 148 149 #modalbox .button .btn button { 150 border: none; 151 outline: none; 152 width: 60px; 153 height: 30px; 154 border-radius: 8px; 155 display: inline-block; 156 margin: 0 25px; 157 color: #fff; 158 font-weight: 600; 159 font-size: 16px; 160 } 161 162 #modalbox .button .btn .save { 163 background-color: #003c8d; 164 width: 80px; 165 } 166 167 #modalbox .button .btn .Cancel { 168 background-color: yellow; 169 color: #000; 170 } 171 172 #modalbox .button .btn .Cancel:active { 173 border: 1px solid #ccc; 174 background-color: #fefe55; 175 } 176 177 #modalbox .allMenuliat, 178 #modalbox .CommonMenulist { 179 width: 90%; 180 height: 394px; 181 overflow: auto; 182 line-height: 33px; 183 margin: 0 auto; 184 } 185 186 #modalbox .allMenuliat .item, 187 #modalbox .CommonMenulist .item { 188 padding-left: 10px; 189 border-bottom: 1px dashed #ccc; 190 position: relative; 191 } 192 193 #modalbox .allMenuliat .item span, 194 #modalbox .CommonMenulist .item span { 195 font-size: 16px; 196 font-weight: 600; 197 } 198 199 #modalbox .allMenuliat .item .icon, 200 #modalbox .CommonMenulist .item .icon { 201 position: absolute; 202 right: 0px; 203 top: 50%; 204 font-size: 14px; 205 width: 20px; 206 height: 20px; 207 text-align: center; 208 line-height: 20px; 209 transform: translateY(-50%); 210 border: solid #555 1px; 211 border-radius: 50%; 212 box-sizing: border-box; 213 cursor: pointer; 214 outline: none; 215 background-color: #fff; 216 } 217 218 #modalbox .allMenuliat .item .icon:active, 219 #modalbox .CommonMenulist .item .icon:active { 220 background-color: #f2f2f2; 221 } 222 223 224 ::-webkit-scrollbar { 225 display: none; 226 width: 6px; 227 height: 6px; 228 } 229 230 ::-webkit-scrollbar-track-piece { 231 background: #eee; 232 } 233 234 ::-webkit-scrollbar-thumb:vertical { 235 background: #666; 236 } 237 238 .weitishi{ 239 position: fixed; 240 color: #000; 241 z-index: 99999; 242 background: rgba(0,60,141,0.5); 243 top: 200px; 244 right: 10px; 245 width: 10vw; 246 padding: 20px 10px 20px 20px; 247 border-radius: 30px 0 0 30px; 248 border: 2px solid #ccc; 249 display: none; 250 font-weight: 600; 251 } 252 .noMenudata{ 253 position: absolute; 254 top: 30%; 255 text-align: center; 256 transform: translateY(-50%); 257 width: 90%; 258 font-size: 20px; 259 } 260 </style> 261 </head> 262 263 <body> 264 <div class="weitishi"></div> 265 <button id="MenueSttings">按钮</button> 266 267 <div id="modalbox"> 268 <div class="top">常用菜单设置 269 <span class="guanbimotaikaung">×</span> 270 </div> 271 <div class="button"> 272 <!-- 所有菜单 --> 273 <div class="allMenu"> 274 <div class="title">所有菜单列表:</div> 275 <div class="serch"> 276 <input type="text" placeholder="请输入搜索内容" id="serchinput"> 277 <button class="serchbtn">搜索</button> 278 </div> 279 <div class="allMenuliat"> 280 <!-- 总列表 --> 281 </div> 282 283 </div> 284 <!-- 常用菜单 --> 285 <div class="CommonMenu"> 286 <div class="title">常用菜单列表:</div> 287 288 <div class="CommonMenulist"> 289 <!-- 常用列表 --> 290 </div> 291 292 </div> 293 <!-- 确认 取消 --> 294 <div class="btn"> 295 <button class="save" id="save">保存设置</button> 296 <button class="Cancel" id="Cancel">取消</button> 297 </div> 298 </div> 299 </div> 300 301 <script id="test" type="text/html"> 302 {{each list as value}} 303 <div class="item" id="allMenuitem"> 304 <span>{{value.name}}</span> 305 <button slot={{value.id}} class="icon" id="iconjia">＋</button> 306 </div> 307 {{/each}} 308 </script> 309 <script id="temp" type="text/html"> 310 {{each list as value}} 311 <div class="item"> 312 <span>{{value.name}}</span> 313 <button slot={{value.id}} class="icon" id="iconjian">－</button> 314 </div> 315 {{/each}} 316 </script> 317 <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script> 318 <script src="./template-web.js"></script> // alt-template渲染模板 319 <script> 320 $(function () { 321 var idArr = []; 322 // 显示模态框 323 $("#MenueSttings").click(function () { 324 $('#modalbox').css({ 325 'display': 'block' 326 }) 327 }) 328 // 取消按钮隐藏模态框 329 $("#Cancel").click(function () { 330 $('#modalbox').css({ 331 'display': 'none' 332 }) 333 }) 334 // 点击叉号 335 $(".guanbimotaikaung").click(function () { 336 $('#modalbox').css({ 337 'display': 'none' 338 }) 339 }) 340 // 渲染列表总 341 var data = { 342 list: [ 343 { name: "1项目管理", id: 5 }, 344 { name: "2项目管理", id: 6 }, 345 { name: "3项目管理", id: 7 }, 346 { name: "4项目管理", id: 8 }, 347 { name: "5项目管理", id: 9 }, 348 { name: "6项目管理", id: 10 }, 349 { name: "7项目管理", id: 11 }, 350 { name: "8项目管理", id: 12 }, 351 { name: "9项目管理", id: 13 }, 352 { name: "10项目管理", id: 14 }, 353 { name: "11项目管理", id: 15 } 354 ] // 返回的数据替换掉 355 }; 356 // 右侧数组 357 var CommonMenudata = { 358 list: [] 359 } 360 CommonMenudata.list = JSON.parse(localStorage.getItem("modalBoxData")) || [] 361 for (var i = 0; i < CommonMenudata.list.length; i++) { 362 idArr.push(CommonMenudata.list[i].id) 363 } 364 $(".allMenuliat").html(template('test', data)) 365 $(".CommonMenulist").html(template('temp', CommonMenudata)) 366 var thisdom; 367 for(var i=0;i<idArr.length;i++){ 368 thisdom = $(".allMenuliat .item [slot=" + idArr[i] + "]") 369 thisdom.css({ 370 "cursor": "not-allowed", "color": "#ccc", "border": "1px solid #ccc" 371 }) 372 thisdom.attr("disabled", true); 373 thisdom.closest('.item').css({ 374 "cursor": "not-allowed", "color": "#ccc" 375 }) 376 } 377 if (CommonMenudata.list.length == 0) { 378 var dom = "<div class='noMenudata'>快来设置常用菜单吧!<br/>ヾ(≧O≦)〃~~</div>" 379 $(".CommonMenulist").html(dom) 380 } 381 // 点击添加 382 $(".allMenuliat").on("click", "#iconjia", function (e) { 383 var flag = true 384 for(var i = 0;i<CommonMenudata.list.length;i++){ 385 if(CommonMenudata.list[i].id !== e.currentTarget.slot){ 386 // console.log("可以添加", CommonMenudata.list[i].id) 387 flag = false 388 } 389 } 390 var thisdom = $(".allMenuliat .item [slot=" + e.currentTarget.slot + "]") 391 thisdom.css({ 392 "cursor": "not-allowed", "color": "#ccc", "border": "1px solid #ccc", "pointer-events": "none" 393 }) 394 thisdom.closest('.item').css({ 395 "cursor": "not-allowed", "color": "#ccc" 396 }) 397 thisdom.attr("disabled", true); 398 399 var text = thisdom.closest('.item').text().trim() 400 var item = {} 401 item.id = e.currentTarget.slot 402 item.name = text.substring(0, text.length - 1).trim() 403 CommonMenudata.list.unshift(item); 404 $(".CommonMenulist").html(template('temp', CommonMenudata)); 405 }) 406 // 点击删除 407 $(".CommonMenulist").on("click", "#iconjian", function (e) { 408 var id; 409 var index; 410 for (var i = 0; i < CommonMenudata.list.length; i++) { 411 if (e.currentTarget.slot === CommonMenudata.list[i].id) { 412 id = CommonMenudata.list[i].id 413 index = i 414 } 415 } 416 CommonMenudata.list.splice(index, 1) 417 $(".CommonMenulist").html(template('temp', CommonMenudata)) 418 419 var thisdom = $(".allMenuliat .item [slot=" + id + "]") 420 thisdom.css({ 421 "cursor": "default ", "color": "#555", "border": "1px solid #000","pointer-events": "auto" 422 }) 423 thisdom.attr("disabled", false); 424 425 thisdom.closest('.item').css({ 426 "cursor": "default ", "color": "#555" 427 }) 428 }) 429 // 点击确定按钮 430 $("#save").click(function () { 431 localStorage.setItem("modalBoxData", JSON.stringify(CommonMenudata.list)) 432 var idarr = []; 433 for(var i =0;i< CommonMenudata.list.length;i++){ 434 idarr.push(CommonMenudata.list[i].id) 435 } 436 console.log(idarr.join()) 437 438 $(".weitishi").text("系统导航菜单设置成功").fadeIn(300) 439 setTimeout(function(){ 440 $(".weitishi").fadeOut(300) 441 },1000) 442 }) 443 444 $(".serchbtn").click(function(){ 445 console.info($("#serchinput").val()) 446 // 搜索需要进行的事件 447 }) 448 }) 449 // cursor: not - allowed 450 451 </script> 452 </body> 453 454 </html>
模态框➕穿梭框。demo (jq项目)
猜你喜欢
转载自www.cnblogs.com/bing23443414/p/12066470.html
今日推荐
周排行