网页弹出框--播放视频
Posted 一人庸
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页弹出框--播放视频相关的知识，希望对你有一定的参考价值。
网页点击弹出框播放视频
1/准备好基础网页.重置样式表什么的都已经写好的网页
2/调入弹出框CSS样式
/*! * ui-dialog.css * Date: 2014-07-03 * https://github.com/aui/artDialog * (c) 2009-2014 TangBin, http://www.planeArt.cn * * This is licensed under the GNU LGPL, version 2.1 or later. * For details, see: http://www.gnu.org/licenses/lgpl-2.1.html */ .ui-dialog { *zoom:1; _float: left; position: relative; background-color: #FFF; border: 1px solid #999; /*border-radius: 6px;*/ outline: 0; background-clip: padding-box; font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform .15s ease-in-out, opacity .15s ease-in-out; transition: transform .15s ease-in-out, opacity .15s ease-in-out; } .ui-popup-show .ui-dialog { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .ui-dialog-grid { width: auto; margin: 0; border: 0 none; border-collapse:collapse; border-spacing: 0; background: transparent; } .ui-dialog-header, .ui-dialog-body, .ui-dialog-footer { padding: 0; border: 0 none; text-align: left; background: transparent; } .ui-dialog-header { white-space: nowrap; background: #f7f9f8; /*-ms-border-radius: 8px;*/ /*-webkit-border-radius: 8px;*/ /*-moz-border-radius: 8px;*/ /*border-radius: 8px;*/ } .ui-dialog-close { position: relative; _position: absolute; float: right; top: 0; right: 0; height: 40px; width: 53px; font-size: 21px; font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #FFF; opacity: .2; filter: alpha(opacity=20); cursor: pointer; background: transparent; _background: #FFF; border: 0; -webkit-appearance: none; } .ui-dialog-close:hover, .ui-dialog-close:focus { color: #000000; text-decoration: none; cursor: pointer; outline: 0; opacity: 0.5; filter: alpha(opacity=50); -ms-border-radius: 0 8px 0 0; -webkit-border-radius: 0 8px 0 0; -moz-border-radius: 0 8px 0 0; border-radius: 0 8px 0 0; blr:expression(this.onFocus=this.blur()); } .ui-dialog-close:hover{ /* background: #ffffff; */ opacity: 1; filter: alpha(opacity=100); } .ui-dialog-title { margin: 0; line-height: 40px; min-height: 16.428571429px; padding-left: 20px; overflow:hidden; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; cursor: default; } .ui-dialog-body { padding: 20px; text-align: center; } .ui-dialog-content { display: inline-block; position: relative; vertical-align: middle; *zoom: 1; *display: inline; text-align: center; } .ui-dialog-footer { padding: 0 20px 0px 0; } .ui-dialog-statusbar { float: left; margin-right: 20px; padding: 6px 0; line-height: 1.428571429; font-size: 14px; color: #888; white-space: nowrap; } .ui-dialog-statusbar label:hover { color: #333; } .ui-dialog-statusbar input, .ui-dialog-statusbar .label { vertical-align: middle; } .ui-dialog-button { text-align: center; width: 100%; white-space: nowrap; margin-bottom: 20px; margin-top: 25px; } .ui-dialog-footer button+button { margin-bottom: 0; margin-left: 10px; } .ui-dialog-footer button { color: #ffffff; background: #a8a9a9; width:auto; overflow:visible; display: inline-block; padding: 6px 32px; _margin-left: 5px; margin-bottom: 0; border: none; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .ui-dialog .ui-dialog-grid .ui-dialog-footer button.ui-dialog-autofocus{ background: #9ece69; border: none; /*padding: 6px 69px;*/ } .ui-dialog .ui-dialog-grid .ui-dialog-footer button.ui-dialog-autofocus:hover{ background: #80ae50; color: #ffffff; } .ui-dialog-footer button:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .ui-dialog-footer button:hover, .ui-dialog-footer button:focus { color: #333333; text-decoration: none; } .ui-dialog-footer button:active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .ui-dialog-footer button[disabled] { pointer-events: none; cursor: not-allowed; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; } .ui-dialog-footer button { } .ui-dialog-footer button:hover, .ui-dialog-footer button:focus, .ui-dialog-footer button:active { color: #ffffff; background-color: #595758; border: none; } .ui-dialog-footer button:active{ background-image: none; } .ui-dialog-footer button[disabled], .ui-dialog-footer button[disabled]:hover, .ui-dialog-footer button[disabled]:focus, .ui-dialog-footer button[disabled]:active { background-color: #ffffff; border-color: #cccccc; } .ui-dialog-footer button.ui-dialog-autofocus { color: #ffffff; background-color: #428bca; border-color: #357ebd; } /* .ui-dialog-footer button.ui-dialog-autofocus:hover, .ui-dialog-footer button.ui-dialog-autofocus:focus, .ui-dialog-footer button.ui-dialog-autofocus:active { color: #ffffff; background-color: #3276b1; border-color: #285e8e; } */ .ui-dialog-footer button.ui-dialog-autofocus:active { background-image: none; } .ui-popup-top-left .ui-dialog, .ui-popup-top .ui-dialog, .ui-popup-top-right .ui-dialog { top: -8px; } .ui-popup-bottom-left .ui-dialog, .ui-popup-bottom .ui-dialog, .ui-popup-bottom-right .ui-dialog { top: 8px; } .ui-popup-left-top .ui-dialog, .ui-popup-left .ui-dialog, .ui-popup-left-bottom .ui-dialog { left: -8px; } .ui-popup-right-top .ui-dialog, .ui-popup-right .ui-dialog, .ui-popup-right-bottom .ui-dialog { left: 8px; } .ui-dialog-arrow-a, .ui-dialog-arrow-b { position: absolute; display: none; width: 0; height: 0; overflow:hidden; _color:#FF3FFF; _filter:chroma(color=#FF3FFF); border:8px dashed transparent; } .ui-popup-follow .ui-dialog-arrow-a, .ui-popup-follow .ui-dialog-arrow-b{ display: block; } .ui-popup-top-left .ui-dialog-arrow-a, .ui-popup-top .ui-dialog-arrow-a, .ui-popup-top-right .ui-dialog-arrow-a { bottom: -16px; border-top:8px solid #7C7C7C; } .ui-popup-top-left .ui-dialog-arrow-b, .ui-popup-top .ui-dialog-arrow-b, .ui-popup-top-right .ui-dialog-arrow-b { bottom: -15px; border-top:8px solid #fff; } .ui-popup-top-left .ui-dialog-arrow-a, .ui-popup-top-left .ui-dialog-arrow-b { left: 15px; } .ui-popup-top .ui-dialog-arrow-a, .ui-popup-top .ui-dialog-arrow-b { left: 50%; margin-left: -8px; } .ui-popup-top-right .ui-dialog-arrow-a, .ui-popup-top-right .ui-dialog-arrow-b { right: 15px; } .ui-popup-bottom-left .ui-dialog-arrow-a, .ui-popup-bottom .ui-dialog-arrow-a, .ui-popup-bottom-right .ui-dialog-arrow-a { top: -16px; border-bottom:8px solid #7C7C7C; } .ui-popup-bottom-left .ui-dialog-arrow-b, .ui-popup-bottom .ui-dialog-arrow-b, .ui-popup-bottom-right .ui-dialog-arrow-b { top: -15px; border-bottom:8px solid #fff; } .ui-popup-bottom-left .ui-dialog-arrow-a, .ui-popup-bottom-left .ui-dialog-arrow-b { left: 15px; } .ui-popup-bottom .ui-dialog-arrow-a, .ui-popup-bottom .ui-dialog-arrow-b { margin-left: -8px; left: 50%; } .ui-popup-bottom-right .ui-dialog-arrow-a, .ui-popup-bottom-right .ui-dialog-arrow-b { right: 15px; } .ui-popup-left-top .ui-dialog-arrow-a, .ui-popup-left .ui-dialog-arrow-a, .ui-popup-left-bottom .ui-dialog-arrow-a { right: -16px; border-left:8px solid #7C7C7C; } .ui-popup-left-top .ui-dialog-arrow-b, .ui-popup-left .ui-dialog-arrow-b, .ui-popup-left-bottom .ui-dialog-arrow-b { right: -15px; border-left:8px solid #fff; } .ui-popup-left-top .ui-dialog-arrow-a, .ui-popup-left-top .ui-dialog-arrow-b { top: 15px; } .ui-popup-left .ui-dialog-arrow-a, .ui-popup-left .ui-dialog-arrow-b { margin-top: -8px; top: 50%; } .ui-popup-left-bottom .ui-dialog-arrow-a, .ui-popup-left-bottom .ui-dialog-arrow-b { bottom: 15px; } .ui-popup-right-top .ui-dialog-arrow-a, .ui-popup-right .ui-dialog-arrow-a, .ui-popup-right-bottom .ui-dialog-arrow-a { left: -16px; border-right:8px solid #7C7C7C; } .ui-popup-right-top .ui-dialog-arrow-b, .ui-popup-right .ui-dialog-arrow-b, .ui-popup-right-bottom .ui-dialog-arrow-b { left: -15px; border-right:8px solid #fff; } .ui-popup-right-top .ui-dialog-arrow-a, .ui-popup-right-top .ui-dialog-arrow-b { top: 15px; } .ui-popup-right .ui-dialog-arrow-a, .ui-popup-right .ui-dialog-arrow-b { margin-top: -8px; top: 50%; } .ui-popup-right-bottom .ui-dialog-arrow-a, .ui-popup-right-bottom .ui-dialog-arrow-b { bottom: 15px; } @-webkit-keyframes ui-dialog-loading { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes ui-dialog-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ui-dialog-loading { vertical-align: middle; position: relative; display: block; *zoom: 1; *display: inline; overflow: hidden; width: 32px; height: 32px; top: 50%; margin: -16px auto 0 auto; font-size: 0; text-indent: -999em; color: #666; } .ui-dialog-loading { width: 100%\9; text-indent: 0\9; line-height: 32px\9; text-align: center\9; font-size: 12px\9; } .ui-dialog-loading::after { position: absolute; content: ‘‘; width: 3px; height: 3px; margin: 14.5px 0 0 14.5px; border-radius: 100%; box-shadow: 0 -10px 0 1px #ccc, 10px 0px #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc; -webkit-transform: rotate(360deg); -webkit-animation: ui-dialog-loading 1.5s infinite linear; transform: rotate(360deg); animation: ui-dialog-loading 1.5s infinite linear; display: none\9; } /******璁句负宸茶*******/ .read{ display: none; } .readH,.readCont{ color: #595758; text-align: center; width: 100%; } .readH{ font-size: 16px; margin-top: 27px; } .readCont{ font-size: 14px; margin-top: 3px; display: inline-block; } /***閲嶅畾涔?**/ /******iframe*******/ /***鏍稿悕缁撴灉-閫氳繃**/ .iframeCont{ height: auto; width: 100%; overflow: hidden; text-align: center; font-size: 14px; padding: 0 40px 0 15px; } .iframeCont h4{ color: #595758; margin: 6px 0 11px 0; text-align: left; } .iframeCont input{ width: 100%; border: 1px solid #dcdedd; height: 38px; line-height: 38px; text-indent: 10px; color: #9fa1a0; margin: 5px 0 9px 0; } .iframeCont input:focus{ border: 1px solid #94c95a; } .iframeCont p{ text-align: left; color: #595758; line-height: 1.7; } .iframeCont p em{ color: #ed5564; margin: 0 5px; } /*but*/ .iframeBut{ height: auto; padding: 10px 0 0; width: 100%; margin: 20px 0 10px; float: left; } .iframeBut a{ color: #ffffff; padding: 10px 32px; background: #9fa1a0; } .iframeBut a:hover{ background: #595758; } .iframeBut .butRight{ margin-left: 6px; padding: 10px 70px; background: #94c95a; } .iframeBut .butRight:hover{ background: #80ae50; } /***涓婁紶浜や欢鏉愭枡**/ .uploadText{ color: #9fa1a0; text-align: left; width: 100%; } .upText{ font-size: 14px; height: 40px; line-height: 40px; text-align: left; text-indent: 10px; } .fileName{ text-align: left; line-height: 1.5; font-size: 14px; color: #9fa1a0; } .uploadify{ float: left; margin-top: 7px; } object { margin-left: 10px; vertical-align: middle; } .uploadText span{ display: inline-block; height: 25px; vertical-align: middle; width: 115px; margin-left: 10px; background: url("../Image/Upload/uploadimg.png") no-repeat scroll center center; } .uploadTextShow{ width: 100%; height: auto; overflow: hidden; margin-top: 23px; } .uploadText > span { float: left; margin-top: 6px; } a.uploadify-button { display: inline-block; height: 25px; line-height: 25px; width: 115px; color:#666; } a.uploadify-button:hover{ /*background: url("../../../Image/l_upload_1.png") no-repeat scroll 0px 0px;*/ color:#007bc7; } a.uploadify-button:active{ background: none; } em.prompt { color: #c2c5c3; display: inline-block; font-size: 12px; margin-left: 10px; margin-top: 11px; text-align: left; } .uploadify-queue-item{ width: 100%; text-align: left; margin-bottom: 10px; } .uploadify-queue-item .fileName{ display: inline-block; font-size: 14px; line-height: 1.5; padding-left: 10px; text-align: left; text-indent: 2px; } .uploadText object{ margin-left: 10px; margin-top: 1px; } .uploadTextShow li{ float: left; padding: 5px 0; width: 240px; margin: 0 0 10px 20px; background: #f3f3f3; position: relative; } .uploadTextShow img{ float: left; } .TextShow{ display: table-cell; *display: inline-block; padding-left: 5px; width: 160px; height: 30px; } .TextShow span{ display: block; width: 100%; text-align: left; font-weight: normal; margin-top: -2px; } .TextShow em{ font-size: 12px; color: #48872d; margin-left: 15px; } .TextShow .TextShowB{ font-size: 12px; margin-top: 7px; } .TextColse{ color: #f0667e; position: absolute; right: 8px; top: 7px; cursor: pointer; } .TextColse a{ color: #f0667e; } /***textarea**/ .iframeCont textarea{ border: 1px solid #dcdedd; color: #9fa1a0; font-size: 14px; height: 68px; line-height: 1.5; margin-top: 20px; padding: 1px 5px; width: 100%; } /***涓嶆帴姝ゅ崟鐨勫師鍥?**/ .noOrders{ margin-top: 3px; } .noOrders label { display: inline-block; width: 100%; padding-left: 108px; margin-top: 9px; } .noOrders input[type="checkbox"] { border: medium none; float: left; height: auto; line-height: normal; margin: 3px 0 0; text-indent: 0; width: auto; } .noOrders span { display: inline-block; float: left; vertical-align: middle; margin-left: 10px; color: #595758; } .noOrders textarea { margin-left: 100px; width: 70%; } /***寮€濮嬫湇鍔?**/ .startSer{ border: 1px dashed #e4e3bf; height: 38px; line-height: 38px; background: #fffbef; margin: 15px 13px 0 36px; } .startSer span{ font-size: 14px; color: #595758; float: left; text-indent: 15px; } .startSer .startSerRi { float: right; padding-right: 33px; } /***寮€濮嬫湇鍔＄殑淇℃伅**/ .serInform{ background: #fffbef; margin: 15px 13px 0 36px; height: 300px; } .serInforms div { float: left; text-align: left; width: 100%; color: #595758; margin-top: 13px; } .serInforms span{ width: 150px; display: inline-block; text-align: right; color: #9fa1a0; float: left; } .serInforms p{ margin-left: 150px; } body{ background: #ffffff; } /*鏈瘎浠疯鍗曞垪琛?*/ .dialog-table-ui { font-size: 16px; } .dialog-table-ui h4{ line-height: 30px; font-size: 18px; font-weight: normal; color: #666; padding-bottom: 20px; } .dialog-table-ui p{ line-height: 35px; color: #666; padding-left: 36px; margin: 0 0 10px; } .dialog-table-ui a { background: none repeat scroll 0 0 #b1ca6e; color: #ffffff; display: inline-block; float: right; line-height: 25px; padding: 2px 8px; margin-top: 3px; margin-right: 47px; *margin-top: -32px; } .anm a:hover,.dialog-table-ui a:hover{ background: none repeat scroll 0 0 #769f3c; color: #ffffff; } .anm{ margin-top: 80px; } .anm a,.anm{ height: 35px; line-height: 35px; color: #ffffff; text-align: center; } .anm a { background: none repeat scroll 0 0 #9bbe69; display: inline-block; padding: 0 65px; float: none; position: relative; right: 0; top: 0; } .center-vo { height: 270px; overflow-y: auto; font-size: 14px; } .dialog-table-ui-coupon .anm { margin-left: 37px; margin-top: 22px; } /**鏄惁纭畾淇敼锛?*/ .popEm{ margin-top: 12px; display: inline-block; } /**鍦ㄧ嚎浠樻*/ #pay-confirm h3 { margin-bottom: 20px; margin-top: 5px; } /**淇敼鎵嬫満鍙?*/ .mLayer-h2,.mLayer-s{ width: 100%; color: #595758; text-align: left; display: inline-block; } .mLayer-h2{ font-size: 14px; } .mLayer-s{ font-size: 12px; margin-top: 3px; } .modifyLayer{ display: none; } .myInvoiceLayer .inputDiv{ width: 250px; } .myInvoice-one.myInvoiceBg.myInvoiceLayer{ background: none; border: none; background: #ffffff; } .myInvoiceLayer .myInHd{ background: none; } .modifyLayer-in{ width: 380px; margin: 0 auto; } .myInvoice-one.myInvoiceBg.myInvoiceLayer .inputDiv.current{ border: 1px solid red; } /**鍙屽悜鎷ㄥ彿**/ .th-consulting{ display: none; clear: both; } .phone-counseling{ line-height: normal } .th-top{ display: block; width: 480px; border-top: 6px solid #eeeeee; margin: 18px auto 0; position: relative; font-size: 14px; color: #595758; } .th-top dl{ width: 160px; position: absolute; top: -13px; } .th-top .process1{ left: -80px; } .th-top .process2{ left: 80px; } .th-top .process3{ left: 240px; } .th-top .process4{ left: 400px; } .th-top dl .p-num{ display: inline-block; width: 20px; height: 20px; line-height: 20px; background: url("../../../Image/Dailog/iconProcess.png") 0 0 no-repeat; font-size: 12px; color: #d9d9d9; } .th-top dl .p-text{ padding-top: 6px; } .th-top .current .p-num{ color: #65c3a7; background-position:0 -20px; } .consultName{ padding-top: 68px; line-height: 80px; } .consultName span{ font-size: 14px; color: #333333; margin-left: 10px; } .consultName .callto{ margin: 35px 10px 0; } .consultTips{ padding: 20px 0; font-size: 14px; color: #595758; line-height: 32px; } .colorb0b{ color: #b0b0b0; } .size12{ font-size: 12px; line-height: 16px; } .consultBtn a{ vertical-align: top; } .consultBtn p{ padding: 7px 0; } .consultBtn .callipt{ padding:0; text-indent: 10px; height:38px; line-height:38px; width:162px; border:1px solid #dcdedd; vertical-align: top; display: inline-block; float: none; } .consultBtn .close{ width: 136px; margin-left: 20px; border: 1px solid #dcdedd; } .consultBtn .getCode{ padding: 0 25px; margin-left: 10px; background: #f5f4f4; border: 1px solid #c1bfbf; color: #595758; } .consultBtn .countdown{ display: none; padding: 0; width: 122px; } .errorPrompt{ display: none; font-size: 12px; color: #ee4d50; background: url("../../../Image/Incubator/iconError.png") 0 9px no-repeat; height: 35px; line-height: 35px; text-align: left; margin-left: 129px; padding-left: 19px; } .consultBtn .newstip{ display: inline-block; height: 15px; line-height: 15px; font-size: 12px; text-align: left; color: #595758; padding: 0; } .consultBtn .errortip{ padding:0 0 0 20px; background: url("../../../Image/Incubator/iconError.png") 0 0 no-repeat; color: #ee4d50; } .consultBtn .w240{ width: 240px; } .consultBtn .w110{ width: 108px; } .padtop10{ padding-top: 10px; } .padtop50{ padding-top: 50px; } .margtop53{ margin-top: 53px; } .margtop20{ margin-top: 20px; } .th-poper{ margin-top: 14px; } .th-poper input[type="text"]{ width: 472px; border: 1px solid #dcdedd; } .th-poper .form-label{ width: 117px; color: #9fa1a0; text-align: left; text-indent: 18px; font-size: 14px; } .th-butZxun,.th-colose{ text-align: center; margin: 40px 0; } .th-but{ display: inline-block; height: 35px; line-height: 35px; font-size: 16px; color: #ffffff; text-align: center; } .th-butZxun a{ padding: 0 38px; background: #94c95a; } .th-butZxun a:hover{ background: #81ac52; } .th-colose a{ background: #9fa1a0; width: 175px; } .th-top h1{ font-size: 14px; color: #595758; text-align: center; line-height: 1; } .th-th{ height: 50px; width: 222px; margin: 40px auto 0; position: relative; background: url("../../../Image/th-th.png") no-repeat center center; } .th-th em{ position: absolute; width: 14px; height: 14px; display: inline-block; top: 18px; } .th-th .bigEm{ background: url("../../../Image/bigem.png") no-repeat center center; } .th-th .smallEm{ background: url("../../../Image/smallem.png") no-repeat center center; } .th-th .em1{left: 70px;} .th-th .em2{left: 104px;} .th-th .em3{left: 138px;} .CentGroup.group.confirm-company{ width: 100%; } .confirm-company span{ float: left; margin-top: 10px; width: 100%; } .call-p{ font-size: 14px; color: #595758; text-align: left; text-indent: 120px; margin-top: 15px; } .th-butZxun{ margin-top: 15px; } .serverCall{ width: 100%; text-align: center; float: left; margin: 25px 0; } .serverCall > p{ color: #94c95a; font-size: 16px; font-weight: bold; line-height: 1.8; } /**璇稵A涓烘垜鏈嶅姟**/ .myService-in img,.myService-in div{float: left;} .myService-in div{width: auto;} .myService-in {padding: 0 30px;} .myService-in span{ display: inline-block; float: left; line-height: 1.6; margin: 0; padding: 0; text-align: center; width: 100%; } .myService-in img { padding: 0 20px; position: relative; top: 14px; } .myService-list li{float: left;width: 100%;margin-bottom: 20px;} .myService-list span{padding: 0;margin: 0;width: 170px;display: inline-block;text-align: right;height: 30px;line-height: 30px;} .myService-list h4{height: 80px;line-height: 80px;color: #595758;margin-left: 20px;} .myService-list textarea{height: 110px;width: 270px;} .popSerScreen-1 select{width: 210px;height: 35px;} .myService-list em{ color: #f14b4c; display: inline-block; height: 30px; line-height: 30px; text-indent: 20px; } /****/ .invoicing-in{width: 312px;margin: 0 auto;} .invoicing-in h3{font-size: 16px;color: #595758;} /**纭缁撴**/ .confirmbalancediv-in{color: #595758;text-align: center;} .confirmbalancediv-in h4{font-size: 16px;line-height: 1;margin: 10px 0 17px 0;} .confirmbalancediv-in p{line-height: 1.6;font-size: 14px;} .balancediv-but{text-align: center;width: 310px;margin: 30px auto 40px auto;} .balancediv-but a{display: inline-block;height: 25px;line-height: 25px;width: 140px;color: #ffffff;float: left;cursor: pointer;} /**瀵圭粨娆炬湁鐤戦棶**/ .popDoubt{width: 305px;margin: 0 auto;display: inline-block;} .popDoubt > div{margin: 5px 0 18px;} .popDoubt p{text-align: left;line-height: 1.5;font-size: 14px;text-indent: 50px;} .doubList{height: auto;} .doubList li{float: left;margin-bottom: 15px;position: relative;} .doubList span,.doubList div{float: left;font-size: 14px;text-align: left;} .doubList span{width: 50px;} .doubList select{;height: 35px;line-height: 35px;} .doubList textarea,.doubList select{width: 250px;color: #919191;border: 1px solid #cccccc;} .doubList textarea{color: #919191;border: 1px solid #cccccc;} .doubList textarea{height: 100px;} .doubList b{color: #ed5564;} .doubList p{color: #cccccc;font-size: 12px;text-align: left;text-indent: 20px;} .popDoubt a{display: inline-block;height: 25px;line-height: 25px;margin-top: 5px;text-align: center;width: 140px;} .doubList em{color: #ed5564;font-size: 12px;height: 35px;line-height: 35px;position: absolute;text-align: left;display: inline-block;text-indent: 15px;width: 150px;right: -150px;} .em_error > em,.em_error > span{height: 100px;line-height: 100px;} .em_error textarea.error,.em_error1s select.error{border: 1px solid #ee6370 !important;} .consultName .evaluate .name{ width: 150px; text-align: center; } .consultName .evaluate .name p{ line-height: 1; padding-top: 24px; font-size: 14px; color: #333; } .consultName .evaluate .content{ width: 450px; } .consultName .evaluate .content h3{ line-height: 1; font-size: 14px; color: #595758; font-weight: normal; text-align: left; } .evaluate .txtIpt{ padding-top: 20px; display: none; } .evaluate .txtIpt input{ width: 357px; padding: 5px 10px; display: block; float: left; height: 28px; line-height: 28px; } .evaluate .labelCon{ padding-top: 16px; display: none; } .evaluate .labelCon ul{ margin-top: 8px; } .evaluate .labelCon ul li{ float: left; width: 88px; height: 30px; margin-right: 9px; border: 1px solid #d19456; font-size: 12px; color: #b7824d; line-height: 30px; text-align: center; cursor: pointer; } .evaluate .labelCon ul li.attrClick{ background: #fff7d8; border-color: #fff7d8; } .evalBtn{ padding-top: 20px; padding-left: 55px; text-align: left; line-height: 1; } .evalBtn a{ display: inline-block; width: 160px; height: 40px; line-height: 40px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
3/调入弹出框js代码(jquery在前)
/*! artDialog v6.0.2 | https://github.com/aui/artDialog */ !function(){function a(b){var d=c[b],e="exports";return"object"==typeof d?d:(d[e]||(d[e]={},d[e]=d.call(d[e],a,d[e],d)||d[e]),d[e])}function b(a,b){c[a]=b}var c={};b("jquery",function(){return jQuery}),b("popup",function(a){function b(){this.destroyed=!1,this.__popup=c("<div />").attr({tabindex:"-1"}).css({display:"none",position:"absolute",outline:0}).html(this.innerHTML).appendTo("body"),this.__backdrop=c("<div />"),this.node=this.__popup[0],this.backdrop=this.__backdrop[0],d++}var c=a("jquery"),d=0,e=!("minWidth"in c("html")[0].style),f=!e;return c.extend(b.prototype,{node:null,backdrop:null,fixed:!1,destroyed:!0,open:!1,returnValue:"",autofocus:!0,align:"bottom left",backdropBackground:"#000",backdropOpacity:.7,innerHTML:"",className:"ui-popup",show:function(a){if(this.destroyed)return this;var b=this,d=this.__popup;return this.__activeElement=this.__getActive(),this.open=!0,this.follow=a||this.follow,this.__ready||(d.addClass(this.className),this.modal&&this.__lock(),d.html()||d.html(this.innerHTML),e||c(window).on("resize",this.__onresize=function(){b.reset()}),this.__ready=!0),d.addClass(this.className+"-show").attr("role",this.modal?"alertdialog":"dialog").css("position",this.fixed?"fixed":"absolute").show(),this.__backdrop.show(),this.reset().focus(),this.__dispatchEvent("show"),this},showModal:function(){return this.modal=!0,this.show.apply(this,arguments)},close:function(a){return!this.destroyed&&this.open&&(void 0!==a&&(this.returnValue=a),this.__popup.hide().removeClass(this.className+"-show"),this.__backdrop.hide(),this.open=!1,this.blur(),this.__dispatchEvent("close")),this},remove:function(){if(this.destroyed)return this;this.__dispatchEvent("beforeremove"),b.current===this&&(b.current=null),this.__unlock(),this.__popup.remove(),this.__backdrop.remove(),e||c(window).off("resize",this.__onresize),this.__dispatchEvent("remove");for(var a in this)delete this[a];return this},reset:function(){var a=this.follow;return a?this.__follow(a):this.__center(),this.__dispatchEvent("reset"),this},focus:function(){var a=this.node,d=b.current;if(d&&d!==this&&d.blur(!1),!c.contains(a,this.__getActive())){var e=this.__popup.find("[autofocus]")[0];!this._autofocus&&e?this._autofocus=!0:e=a,this.__focus(e)}return b.current=this,this.__popup.addClass(this.className+"-focus"),this.__zIndex(),this.__dispatchEvent("focus"),this},blur:function(){var a=this.__activeElement,b=arguments[0];return b!==!1&&this.__focus(a),this._autofocus=!1,this.__popup.removeClass(this.className+"-focus"),this.__dispatchEvent("blur"),this},addEventListener:function(a,b){return this.__getEventListener(a).push(b),this},removeEventListener:function(a,b){for(var c=this.__getEventListener(a),d=0;d<c.length;d++)b===c[d]&&c.splice(d--,1);return this},__getEventListener:function(a){var b=this.__listener;return b||(b=this.__listener={}),b[a]||(b[a]=[]),b[a]},__dispatchEvent:function(a){var b=this.__getEventListener(a);this["on"+a]&&this["on"+a]();for(var c=0;c<b.length;c++)b[c].call(this)},__focus:function(a){try{this.autofocus&&!/^iframe$/i.test(a.nodeName)&&a.focus()}catch(b){}},__getActive:function(){try{var a=document.activeElement,b=a.contentDocument,c=b&&b.activeElement||a;return c}catch(d){}},__zIndex:function(){var a=b.zIndex++;this.__popup.css("zIndex",a),this.__backdrop.css("zIndex",a-1),this.zIndex=a},__center:function(){var a=this.__popup,b=c(window),d=c(document),e=this.fixed,f=e?0:d.scrollLeft(),g=e?0:d.scrollTop(),h=b.width(),i=b.height(),j=a.width(),k=a.height(),l=(h-j)/2+f,m=382*(i-k)/1e3+g,n=a[0].style;n.left=Math.max(parseInt(l),f)+"px",n.top=Math.max(parseInt(m),g)+"px"},__follow:function(a){var b=a.parentNode&&c(a),d=this.__popup;if(this.__followSkin&&d.removeClass(this.__followSkin),b){var e=b.offset();if(e.left*e.top<0)return this.__center()}var f=this,g=this.fixed,h=c(window),i=c(document),j=h.width(),k=h.height(),l=i.scrollLeft(),m=i.scrollTop(),n=d.width(),o=d.height(),p=b?b.outerWidth():0,q=b?b.outerHeight():0,r=this.__offset(a),s=r.left,t=r.top,u=g?s-l:s,v=g?t-m:t,w=g?0:l,x=g?0:m,y=w+j-n,z=x+k-o,A={},B=this.align.split(" "),C=this.className+"-",D={top:"bottom",bottom:"top",left:"right",right:"left"},E={top:"top",bottom:"top",left:"left",right:"left"},F=[{top:v-o,bottom:v+q,left:u-n,right:u+p},{top:v,bottom:v-o+q,left:u,right:u-n+p}],G={left:u+p/2-n/2,top:v+q/2-o/2},H={left:[w,y],top:[x,z]};c.each(B,function(a,b){F[a][b]>H[E[b]][1]&&(b=B[a]=D[b]),F[a][b]<H[E[b]][0]&&(B[a]=D[b])}),B[1]||(E[B[1]]="left"===E[B[0]]?"top":"left",F[1][B[1]]=G[E[B[1]]]),C+=B.join("-")+" "+this.className+"-follow",f.__followSkin=C,b&&d.addClass(C),A[E[B[0]]]=parseInt(F[0][B[0]]),A[E[B[1]]]=parseInt(F[1][B[1]]),d.css(A)},__offset:function(a){var b=a.parentNode,d=b?c(a).offset():{left:a.pageX,top:a.pageY};a=b?a:a.target;var e=a.ownerDocument,f=e.defaultView||e.parentWindow;if(f==window)return d;var g=f.frameElement,h=c(e),i=h.scrollLeft(),j=h.scrollTop(),k=c(g).offset(),l=k.left,m=k.top;return{left:d.left+l-i,top:d.top+m-j}},__lock:function(){var a=this,d=this.__popup,e=this.__backdrop,g={position:"fixed",left:0,top:0,width:"100%",height:"100%",overflow:"hidden",userSelect:"none",opacity:0,background:this.backdropBackground};d.addClass(this.className+"-modal"),b.zIndex=b.zIndex+2,this.__zIndex(),f||c.extend(g,{position:"absolute",width:c(window).width()+"px",height:c(document).height()+"px"}),e.css(g).animate({opacity:this.backdropOpacity},150).insertAfter(d).attr({tabindex:"0"}).on("focus",function(){a.focus()})},__unlock:function(){this.modal&&(this.__popup.removeClass(this.className+"-modal"),this.__backdrop.remove(),delete this.modal)}}),b.zIndex=1024,b.current=null,b}),b("dialog-config",{content:‘<span class="ui-dialog-loading">Loading..</span>‘,title:"",statusbar:"",button:null,ok:null,cancel:null,okValue:"ok",cancelValue:"",cancelDisplay:!0,width:"",height:"",padding:"",skin:"",quickClose:!1,cssUri:"../css/ui-dialog.css",innerHTML:‘<div i="dialog" class="ui-dialog"><div class="ui-dialog-arrow-a"></div><div class="ui-dialog-arrow-b"></div><table class="ui-dialog-grid"><tr><td i="header" class="ui-dialog-header"><button i="close" class="ui-dialog-close">×</button><div i="title" class="ui-dialog-title"></div></td></tr><tr><td i="body" class="ui-dialog-body"><div i="content" class="ui-dialog-content"></div></td></tr><tr><td i="footer" class="ui-dialog-footer"><div i="statusbar" class="ui-dialog-statusbar"></div><div i="button" class="ui-dialog-button"></div></td></tr></table></div>‘}),b("dialog",function(a){var b=a("jquery"),c=a("popup"),d=a("dialog-config"),e=d.cssUri;if(e){var f=a[a.toUrl?"toUrl":"resolve"];f&&(e=f(e),e=‘<link rel="stylesheet" href="‘+e+‘" />‘,b("base")[0]?b("base").before(e):b("head").append(e))}var g=0,h=new Date-0,i=!("minWidth"in b("html")[0].style),j="createTouch"in document&&!("onmousemove"in document)||/(iPhone|iPad|iPod)/i.test(navigator.userAgent),k=!i&&!j,l=function(a,c,d){var e=a=a||{};("string"==typeof a||1===a.nodeType)&&(a={content:a,fixed:!j}),a=b.extend(!0,{},l.defaults,a),a._=e;var f=a.id=a.id||h+g,i=l.get(f);return i?i.focus():(k||(a.fixed=!1),a.quickClose&&(a.modal=!0,e.backdropOpacity||(a.backdropOpacity=0)),b.isArray(a.button)||(a.button=[]),void 0!==d&&(a.cancel=d),a.cancel&&a.button.push({id:"cancel",value:a.cancelValue,callback:a.cancel,display:a.cancelDisplay}),void 0!==c&&(a.ok=c),a.ok&&a.button.push({id:"ok",value:a.okValue,callback:a.ok,autofocus:!0}),l.list[f]=new l.create(a))},m=function(){};m.prototype=c.prototype;var n=l.prototype=new m;return l.create=function(a){var d=this;b.extend(this,new c);var e=b(this.node).html(a.innerHTML);return this.options=a,this._popup=e,b.each(a,function(a,b){"function"==typeof d[a]?d[a](b):d[a]=b}),a.zIndex&&(c.zIndex=a.zIndex),e.attr({"aria-labelledby":this._$("title").attr("id","title:"+this.id).attr("id"),"aria-describedby":this._$("content").attr("id","content:"+this.id).attr("id")}),this._$("close").css("display",this.cancel===!1?"none":"").attr("title",this.cancelValue).on("click",function(a){d._trigger("cancel"),a.preventDefault()}),this._$("dialog").addClass(this.skin),this._$("body").css("padding",this.padding),e.on("click","[data-id]",function(a){var c=b(this);c.attr("disabled")||d._trigger(c.data("id")),a.preventDefault()}),a.quickClose&&b(this.backdrop).on("onmousedown"in document?"mousedown":"click",function(){return d._trigger("cancel"),!1}),this._esc=function(a){var b=a.target,e=b.nodeName,f=/^input|textarea$/i,g=c.current===d,h=a.keyCode;!g||f.test(e)&&"button"!==b.type||27===h&&d._trigger("cancel")},b(document).on("keydown",this._esc),this.addEventListener("remove",function(){b(document).off("keydown",this._esc),delete l.list[this.id]}),g++,l.oncreate(this),this},l.create.prototype=n,b.extend(n,{content:function(a){return this._$("content").empty("")["object"==typeof a?"append":"html"](a),this.reset()},title:function(a){return this._$("title").text(a),this._$("header")[a?"show":"hide"](),this},width:function(a){return this._$("content").css("width",a),this.reset()},height:function(a){return this._$("content").css("height",a),this.reset()},button:function(a){a=a||[];var c=this,d="",e=0;return this.callbacks={},"string"==typeof a?d=a:b.each(a,function(a,b){b.id=b.id||b.value,c.callbacks[b.id]=b.callback;var f="";b.display===!1?f=‘ style="display:none"‘:e++,d+=‘<button type="button" data-id="‘+b.id+‘"‘+f+(b.disabled?" disabled":"")+(b.autofocus?‘ autofocus class="ui-dialog-autofocus"‘:"")+">"+b.value+"</button>"}),this._$("footer")[e?"show":"hide"](),this._$("button").html(d),this},statusbar:function(a){return this._$("statusbar").html(a)[a?"show":"hide"](),this},_$:function(a){return this._popup.find("[i="+a+"]")},_trigger:function(a){var b=this.callbacks[a];return"function"!=typeof b||b.call(this)!==!1?this.close().remove():this}}),l.oncreate=b.noop,l.getCurrent=function(){return c.current},l.get=function(a){return void 0===a?l.list:l.list[a]},l.list={},l.defaults=d,l}),window.dialog=a("dialog")}();
4/调入重写的对话/弹出框(这个代码中只用到了webview----重写的iframe对话框)
1 var t = null; 2 var Base={ 3 dialog : null, 4 dialog2 : null, 5 // 提示框，几秒后自动关闭 6 alertTime : function (msg, second, reload){ 7 if (Base.dialog2) 8 { 9 Base.dialog2.close().remove(); 10 } 11 if (t) 12 { 13 clearTimeout(t); 14 } 15 if(typeof title == ‘undefined‘) title = ‘消息‘; 16 if(typeof second == ‘undefined‘) second = 2; 17 Base.dialog2 = dialog({ 18 content: msg 19 }); 20 Base.dialog2.show(); 21 t = setTimeout(function () { 22 Base.dialog2.close().remove(); 23 if (reload != undefined) 24 { 25 window.location.reload(true); 26 } 27 }, second * 1000); 28 }, 29 30 //重写普通对话框 31 alert : function(msg,title,width,height,padding){ 32 if(typeof title == ‘undefined‘) title = ‘消息‘; 33 if(typeof width == ‘undefined‘) width = 540; 34 if(typeof height == ‘undefined‘) height = 150; 35 if(typeof padding == ‘undefined‘) padding = 20; 36 Base.dialog = dialog({ 37 id: ‘alert‘, 38 width: width, 39 height: height, 40 title: title, 41 content: msg, 42 padding:padding 43 }); 44 Base.dialog.showModal(); 45 }, 46 //重写普通对话框 47 weixin : function(msg){ 48 if(typeof width == ‘undefined‘) width = 360; 49 if(typeof height == ‘undefined‘) height = 270; 50 Base.dialog = dialog({ 51 width: width, 52 height: height, 53 title: ‘分享到微信朋友圈‘, 54 content: ‘<img width="220" height="220" src="‘+msg+‘" alt="二维码加载失败..."><p style="text-align: left;padding-top: 10px;">打开微信，点击底部的“发现”，使用 “扫一扫” 即可将网页分享到我的朋友圈。</p>‘ 55 }); 56 Base.dialog.showModal(); 57 }, 58 59 60 //重写气泡对话框 61 poptip : function(msg,id,fn){ 62 if(typeof fn != ‘function‘) fn = function(){}; 63 Base.dialog = dialog({ 64 id: ‘poptip‘, 65 content: msg, 66 padding: 1, 67 onclose: fn, 68 quickClose: true 69 }); 70 Base.dialog.show(document.getElementById(id)); 71 }, 72 73 //重写模态对话框 74 confirm : function(msg,fn,title,width,height,okBtn,cancelBtn){ 75 if(typeof title == ‘undefined‘) title = ‘确认‘; 76 if(typeof okBtn == ‘undefined‘) okBtn = ‘确定‘; 77 if(typeof cancelBtn == ‘undefined‘) cancelBtn = ‘取消‘; 78 if(typeof fn != ‘function‘) fn = function(){}; 79 if(typeof width == ‘undefined‘) width = 400; 80 if(typeof height == ‘undefined‘) height = 90; 81 Base.dialog = dialog({ 82 id: ‘confirm‘, 83 width: width, 84 height: height, 85 title: title, 86 content: msg, 87 okValue: okBtn, 88 ok: fn, 89 cancelValue: cancelBtn, 90 fixed: true, 91 cancel: function () {} 92 }); 93 Base.dialog.showModal(); 94 }, 95 96 97 //重写模态对话框 98 confirmChange : function(msg,fn,title,width,height){ 99 if(typeof title == ‘undefined‘) title = ‘确认‘; 100 if(typeof fn != ‘function‘) fn = function(){}; 101 if(typeof width == ‘undefined‘) width = 400; 102 if(typeof height == ‘undefined‘) height = 90; 103 Base.dialog = dialog({ 104 id: ‘confirm‘, 105 width: width, 106 height: height, 107 title: title, 108 content: msg, 109 okValue: ‘确定‘, 110 ok: fn 111 }); 112 Base.dialog.showModal(); 113 }, 114 115 alertClose:function(){ 116 if(Base.dialog){ 117 Base.dialog.close(); 118 } 119 }, 120 //重写微博对话框 121 weiboImg : function(src,pic,txt){ 122 var s = screen, d = document, e = encodeURIComponent, r = ‘快法务‘, l = ‘http://www.kuaifawu.com/‘, c = ‘utf-8‘, u = d.location; 123 var f = ‘http://v.t.sina.com.cn/share/share.php?appkey=3459704224&searchPic=false&‘, p = [‘url=‘, e(u), ‘&title=‘, e(txt), ‘&source=‘, e(r), ‘&sourceUrl=‘, e(l), ‘&content=‘, c, ‘&pic=‘, e(pic)].join(‘‘); 124 function a() { 125 if (!window.open([f, p].join(‘‘), ‘mb‘, [‘toolbar=0,status=0,resizable=1,width=440,height=430,left=‘, (s.width - 440) / 2, ‘,top=‘, (s.height - 430) / 2].join(‘‘))) u.href = [f, p].join(‘‘); 126 }; 127 if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0); else a(); 128 }, 129 130 131 //重写iframe对话框 132 webview : function(src,width,height,title){ 133 if(typeof width == ‘undefined‘) width = 400; 134 if(typeof height == ‘undefined‘) height = 150; 135 Base.dialog = dialog({ 136 id: ‘confirm‘, 137 width: width, 138 height: height, 139 padding: 0, 140 content: ‘<iframe name="iframename" id="iframeid" style="width:100%;height:100%;" frameborder="0" src="‘+src+‘"></iframe>‘ 141 }); 142 if(typeof title != ‘undefined‘) Base.dialog.title(title); 143 Base.dialog.showModal(); 144 }, 145 getCookie : function(c_name){ 146 if (document.cookie.length>0){ 147 c_start=document.cookie.indexOf(c_name + "="); 148 if (c_start!=-1){ 149 c_start=c_start + c_name.length+1; 150 c_end=document.cookie.indexOf(";",c_start); 151 if (c_end==-1) c_end=document.cookie.length; 152 return unescape(document.cookie.substring(c_start,c_end)); 153 } 154 } 155 return ""; 156 }, 157 setCookie : function(c_name,value,expiredays){ 158 var exdate=new Date(); 159 exdate.setDate(exdate.getDate()+expiredays) 160 document.cookie=c_name+ "=" +escape(value)+ 161 ((expiredays==null) ? "" : "; expires="+exdate.toGMTString()) + ";path=/"; 162 }, 163 164 //焦点图1 165 setFocusPic:function(obj,obj1,obj2,obj3,obj4,speed){ 166 167 //设置默认参数 168 if(typeof obj == ‘undefined‘) obj = $(‘#container‘); 169 if(typeof obj1 == ‘undefined‘) obj1 = $(‘#list‘); 170 if(typeof obj2 == ‘undefined‘) obj2 = $(‘#buttons span‘); 171 if(typeof obj3 == ‘undefined‘) obj3 = $(‘#prev‘); 172 if(typeof obj4 == ‘undefined‘) obj4 = $(‘#next‘); 173 if(typeof speed == ‘undefined‘) speed = 5000; 174 175 var container = obj; 176 var list = obj1; 177 var buttons = obj2; 178 var prev = obj3; 179 var next = obj4; 180 var index = 1; 181 var len = 5; 182 var interval = speed; 183 var timer; 184 185 function animate (offset) { 186 var left = parseInt(list.css(‘left‘)) + offset; 187 if (offset>0) { 188 offset = ‘+=‘ + offset; 189 } 190 else { 191 offset = ‘-=‘ + Math.abs(offset); 192 } 193 list.animate({‘left‘: offset}, 300, function () { 194 if(left > -200){ 195 list.css(‘left‘, -600 * len); 196 } 197 if(left < (-600 * len)) { 198 list.css(‘left‘, -600); 199 } 200 }); 201 } 202 203 function showButton() { 204 buttons.eq(index-1).addClass(‘on‘).siblings().removeClass(‘on‘); 205 } 206 207 function play() { 208 timer = setTimeout(function () { 209 next.trigger(‘click‘); 210 play(); 211 }, interval); 212 } 213 function stop() { 214 clearTimeout(timer); 215 } 216 217 next.bind(‘click‘, function () { 218 if (list.is(‘:animated‘)) { 219 return; 220 } 221 if (index == 5) { 222 index = 1; 223 } 224 else { 225 index += 1; 226 } 227 animate(-600); 228 showButton(); 229 }); 230 231 prev.bind(‘click‘, function () { 232 if (list.is(‘:animated‘)) { 233 return; 234 } 235 if (index == 1) { 236 index = 5; 237 } 238 else { 239 index -= 1; 240 } 241 animate(600); 242 showButton(); 243 }); 244 245 buttons.each(function () { 246 $(this).bind(‘click‘, function () { 247 if (list.is(‘:animated‘) || $(this).attr(‘class‘)==‘on‘) { 248 return; 249 } 250 var myIndex = parseInt($(this).attr(‘index‘)); 251 var offset = -600 * (myIndex - index); 252 253 animate(offset); 254 index = myIndex; 255 showButton(); 256 }) 257 }); 258 259 container.hover(stop, play); 260 261 play(); 262 263 }, 264 265 //点击切换文字内容 266 texTual:function(clickObj, te, teTual, className){ 267 clickObj.on("click",function(){ 268 if ($(this).text() == te) { 269 $(this).text(teTual); 270 $(this).removeClass(className); 271 }else{ 272 $(this).text(te); 273 $(this).addClass(className); 274 } 275 return false; 276 }); 277 }, 278 279 //创建透明层 280 createTransparent:function(){ 281 $("body").append("<div id=‘mask‘></div>"); 282 var mask; 283 function resizeMask(){ 284 mask = $("#mask"); 285 mask.css({ 286 "height":$(document).height(), 287 "width":$(window).width() 288 }); 289 } 290 resizeMask(); 291 $(window).resize(function(){ 292 resizeMask() 293 }); 294 }, 295 296 //有淡入效果的弹出层 297 colCanLayThick:function(opt){ 298 //调用透明层 299 Base.createTransparent(mask); 300 var mask = $("#mask"); 301 opt.layerObj.css("display","block"); 302 //弹层关闭按钮 303 opt.colse.click(function(){ 304 opt.layerObj.css("display","none"); 305 mask.remove(); 306 }); 307 //取消按钮 308 if(opt.cance) 309 { 310 opt.cance.click(function(){ 311 opt.layerObj.css("display","none"); 312 mask.remove(); 313 }); 314 } 315 return false; 316 }, 317 318 //设置表格行颜色 319 setTabRow:function(obj,className,className1,className2){ 320 321 //设置默认参数 322 if(typeof className == ‘undefined‘) className = ‘oddtd1‘; 323 if(typeof className1 == ‘undefined‘) className1 = ‘eventd1‘; 324 if(typeof className2 == ‘undefined‘) className2 = ‘currenttd1‘; 325 obj.table({ 326 oddtdClass:className, 327 eventdClass:className1, 328 currenttdClass:className2 329 }); 330 }, 331 332 // 333 setTabEOColor:function(eObj, oObj, eclassName, oclassName){ 334 eObj.addClass(eclassName); 335 oObj.addClass(oclassName); 336 }, 337 338 //设置选项卡 339 setTableTab:function(obj,el,el1,el2){ 340 341 if(typeof el == ‘undefined‘) el = ‘colorChange‘; 342 if(typeof el1 == ‘undefined‘) el1 = ‘#fiUl li‘; 343 if(typeof el2 == ‘undefined‘) el2 = ‘#thDiv div‘; 344 obj.tab({ 345 colorChangeClass:‘colorChange‘, 346 eventType:‘click‘, 347 fiUl:‘#fiUl li‘, 348 thDiv:‘#thDiv div‘ 349 }); 350 }, 351 352 //设置横向下拉菜单 353 setSuperFishMulti:function(obj,obj2,obj3,obj4,obj5){ 354 355 //设置默认参数 356 if(typeof obj == ‘undefined‘) obj = $(‘#example‘); 357 if(typeof obj2 == ‘undefined‘) obj2 = $(‘.destroy‘); 358 if(typeof obj3 == ‘undefined‘) obj3 = $(‘.init‘); 359 if(typeof obj4 == ‘undefined‘) obj4 = $(‘.open‘); 360 if(typeof obj5 == ‘undefined‘) obj5 = $(‘.close‘); 361 // initialise plugin 362 var example = obj.superfish({ 363 //add options here if required 364 }); 365 366 // buttons to demonstrate Superfish‘s public methods 367 obj2.on(‘click‘, function(){ 368 example.superfish(‘destroy‘); 369 }); 370 371 obj3.on(‘click‘, function(){ 372 example.superfish(); 373 }); 374 375 obj4.on(‘click‘, function(){ 376 example.children(‘li:first‘).superfish(‘show‘); 377 }); 378 379 obj5.on(‘click‘, function(){ 380 example.children(‘li:first‘).superfish(‘hide‘); 381 }); 382 }, 383 384 //设置水平SuperfishMegamenu菜单 385 setSuperfishMegamenu:function(obj,obj2,obj3,obj4,obj5){ 386 387 //设置默认参数 388 if(typeof obj == ‘undefined‘) obj = $(‘#example‘); 389 if(typeof obj2 == ‘undefined‘) obj2 = $(‘.destroy‘); 390 if(typeof obj3 == ‘undefined‘) obj3 = $(‘.init‘); 391 if(typeof obj4 == ‘undefined‘) obj4 = $(‘.open‘); 392 if(typeof obj5 == ‘undefined‘) obj5 = $(‘.close‘); 393 var exampleOptions = { 394 speed: ‘fast‘ 395 } 396 // initialise plugin 397 var example = obj.superfish(exampleOptions); 398 399 // buttons to demonstrate Superfish‘s public methods 400 obj2.on(‘click‘, function(){ 401 example.superfish(‘destroy‘); 402 }); 403 404 obj3.on(‘click‘, function(){ 405 example.superfish(exampleOptions); 406 }); 407 408 obj4.on(‘click‘, function(){ 409 example.children(‘li:first‘).superfish(‘show‘); 410 }); 411 412 obj5.on(‘click‘, function(){ 413 example.children(‘li:first‘).superfish(‘hide‘); 414 }); 415 }, 416 417 //设置treeView的默认效果ztreeCore 418 setZtreeCore:function(obj){ 419 420 //设置默认参数 421 if(typeof obj == ‘undefined‘) obj = $("#treeDemo"); 422 var setting = { 423 data: { 424 simpleData: { 425 enable: true 426 } 427 } 428 }; 429 var zNodes =[ 430 { id:1, pId:0, name:"pNode 1", open:true}, 431 { id:11, pId:1, name:"pNode 11"}, 432 { id:111, pId:11, name:"leaf node 111"}, 433 { id:112, pId:11, name:"leaf node 112"}, 434 { id:113, pId:11, name:"leaf node 113"}, 435 { id:114, pId:11, name:"leaf node 114"}, 436 { id:12, pId:1, name:"pNode 12"}, 437 { id:121, pId:12, name:"leaf node 121"}, 438 { id:122, pId:12, name:"leaf node 122"}, 439 { id:123, pId:12, name:"leaf node 123"}, 440 { id:124, pId:12, name:"leaf node 124"}, 441 { id:13, pId:1, name:"pNode 13 - no child", isParent:true}, 442 { id:2, pId:0, name:"pNode 2"}, 443 { id:21, pId:2, name:"pNode 21", open:true}, 444 { id:211, pId:21, name:"leaf node 211"}, 445 { id:212, pId:21, name:"leaf node 212"}, 446 { id:213, pId:21, name:"leaf node 213"}, 447 { id:214, pId:21, name:"leaf node 214"}, 448 { id:22, pId:2, name:"pNode 22"}, 449 { id:221, pId:22, name:"leaf node 221"}, 450 { id:222, pId:22, name:"leaf node 222"}, 451 { id:223, pId:22, name:"leaf node 223"}, 452 { id:224, pId:22, name:"leaf node 224"}, 453 { id:23, pId:2, name:"pNode 23"}, 454 { id:231, pId:23, name:"leaf node 231"}, 455 { id:232, pId:23, name:"leaf node 232"}, 456 { id:233, pId:23, name:"leaf node 233"}, 457 { id:234, pId:23, name:"leaf node 234"}, 458 { id:3, pId:0, name:"pNode 3 - no child", isParent:true} 459 ]; 460 $.fn.zTree.init(obj, setting, zNodes); 461 } 462 463 }
5/给所需元素写点击事件弹出框
1 $(function(){ 2 $(".videoimg").click(function(){ 3 Base.webview($(this).attr("url"), 812, 457, $(this).attr("alt")); 4 }); 5 });
传入的4个值分别是1/链接地址...2/长度...3/宽度...4/标题
实测土豆网所有视频地址都可播放.其他视频网站未测..
/*! artDialog v6.0.2 | https://github.com/aui/artDialog */!function(){function a(b){var d=c[b],e="exports";return"object"==typeof d?d:(d[e]||(d[e]={},d[e]=d.call(d[e],a,d[e],d)||d[e]),d[e])}function b(a,b){c[a]=b}var c={};b("jquery",function(){return jQuery}),b("popup",function(a){function b(){this.destroyed=!1,this.__popup=c("<div />").attr({tabindex:"-1"}).css({display:"none",position:"absolute",outline:0}).html(this.innerHTML).appendTo("body"),this.__backdrop=c("<div />"),this.node=this.__popup[0],this.backdrop=this.__backdrop[0],d++}var c=a("jquery"),d=0,e=!("minWidth"in c("html")[0].style),f=!e;return c.extend(b.prototype,{node:null,backdrop:null,fixed:!1,destroyed:!0,open:!1,returnValue:"",autofocus:!0,align:"bottom left",backdropBackground:"#000",backdropOpacity:.7,innerHTML:"",className:"ui-popup",show:function(a){if(this.destroyed)return this;var b=this,d=this.__popup;return this.__activeElement=this.__getActive(),this.open=!0,this.follow=a||this.follow,this.__ready||(d.addClass(this.className),this.modal&&this.__lock(),d.html()||d.html(this.innerHTML),e||c(window).on("resize",this.__onresize=function(){b.reset()}),this.__ready=!0),d.addClass(this.className+"-show").attr("role",this.modal?"alertdialog":"dialog").css("position",this.fixed?"fixed":"absolute").show(),this.__backdrop.show(),this.reset().focus(),this.__dispatchEvent("show"),this},showModal:function(){return this.modal=!0,this.show.apply(this,arguments)},close:function(a){return!this.destroyed&&this.open&&(void 0!==a&&(this.returnValue=a),this.__popup.hide().removeClass(this.className+"-show"),this.__backdrop.hide(),this.open=!1,this.blur(),this.__dispatchEvent("close")),this},remove:function(){if(this.destroyed)return this;this.__dispatchEvent("beforeremove"),b.current===this&&(b.current=null),this.__unlock(),this.__popup.remove(),this.__backdrop.remove(),e||c(window).off("resize",this.__onresize),this.__dispatchEvent("remove");for(var a in this)delete this[a];return this},reset:function(){var a=this.follow;return a?this.__follow(a):this.__center(),this.__dispatchEvent("reset"),this},focus:function(){var a=this.node,d=b.current;if(d&&d!==this&&d.blur(!1),!c.contains(a,this.__getActive())){var e=this.__popup.find("[autofocus]")[0];!this._autofocus&&e?this._autofocus=!0:e=a,this.__focus(e)}return b.current=this,this.__popup.addClass(this.className+"-focus"),this.__zIndex(),this.__dispatchEvent("focus"),this},blur:function(){var a=this.__activeElement,b=arguments[0];return b!==!1&&this.__focus(a),this._autofocus=!1,this.__popup.removeClass(this.className+"-focus"),this.__dispatchEvent("blur"),this},addEventListener:function(a,b){return this.__getEventListener(a).push(b),this},removeEventListener:function(a,b){for(var c=this.__getEventListener(a),d=0;d<c.length;d++)b===c[d]&&c.splice(d--,1);return this},__getEventListener:function(a){var b=this.__listener;return b||(b=this.__listener={}),b[a]||(b[a]=[]),b[a]},__dispatchEvent:function(a){var b=this.__getEventListener(a);this["on"+a]&&this["on"+a]();for(var c=0;c<b.length;c++)b[c].call(this)},__focus:function(a){try{this.autofocus&&!/^iframe$/i.test(a.nodeName)&&a.focus()}catch(b){}},__getActive:function(){try{var a=document.activeElement,b=a.contentDocument,c=b&&b.activeElement||a;return c}catch(d){}},__zIndex:function(){var a=b.zIndex++;this.__popup.css("zIndex",a),this.__backdrop.css("zIndex",a-1),this.zIndex=a},__center:function(){var a=this.__popup,b=c(window),d=c(document),e=this.fixed,f=e?0:d.scrollLeft(),g=e?0:d.scrollTop(),h=b.width(),i=b.height(),j=a.width(),k=a.height(),l=(h-j)/2+f,m=382*(i-k)/1e3+g,n=a[0].style;n.left=Math.max(parseInt(l),f)+"px",n.top=Math.max(parseInt(m),g)+"px"},__follow:function(a){var b=a.parentNode&&c(a),d=this.__popup;if(this.__followSkin&&d.removeClass(this.__followSkin),b){var e=b.offset();if(e.left*e.top<0)return this.__center()}var f=this,g=this.fixed,h=c(window),i=c(document),j=h.width(),k=h.height(),l=i.scrollLeft(),m=i.scrollTop(),n=d.width(),o=d.height(),p=b?b.outerWidth():0,q=b?b.outerHeight():0,r=this.__offset(a),s=r.left,t=r.top,u=g?s-l:s,v=g?t-m:t,w=g?0:l,x=g?0:m,y=w+j-n,z=x+k-o,A={},B=this.align.split(" "),C=this.className+"-",D={top:"bottom",bottom:"top",left:"right",right:"left"},E={top:"top",bottom:"top",left:"left",right:"left"},F=[{top:v-o,bottom:v+q,left:u-n,right:u+p},{top:v,bottom:v-o+q,left:u,right:u-n+p}],G={left:u+p/2-n/2,top:v+q/2-o/2},H={left:[w,y],top:[x,z]};c.each(B,function(a,b){F[a][b]>H[E[b]][1]&&(b=B[a]=D[b]),F[a][b]<H[E[b]][0]&&(B[a]=D[b])}),B[1]||(E[B[1]]="left"===E[B[0]]?"top":"left",F[1][B[1]]=G[E[B[1]]]),C+=B.join("-")+" "+this.className+"-follow",f.__followSkin=C,b&&d.addClass(C),A[E[B[0]]]=parseInt(F[0][B[0]]),A[E[B[1]]]=parseInt(F[1][B[1]]),d.css(A)},__offset:function(a){var b=a.parentNode,d=b?c(a).offset():{left:a.pageX,top:a.pageY};a=b?a:a.target;var e=a.ownerDocument,f=e.defaultView||e.parentWindow;if(f==window)return d;var g=f.frameElement,h=c(e),i=h.scrollLeft(),j=h.scrollTop(),k=c(g).offset(),l=k.left,m=k.top;return{left:d.left+l-i,top:d.top+m-j}},__lock:function(){var a=this,d=this.__popup,e=this.__backdrop,g={position:"fixed",left:0,top:0,width:"100%",height:"100%",overflow:"hidden",userSelect:"none",opacity:0,background:this.backdropBackground};d.addClass(this.className+"-modal"),b.zIndex=b.zIndex+2,this.__zIndex(),f||c.extend(g,{position:"absolute",width:c(window).width()+"px",height:c(document).height()+"px"}),e.css(g).animate({opacity:this.backdropOpacity},150).insertAfter(d).attr({tabindex:"0"}).on("focus",function(){a.focus()})},__unlock:function(){this.modal&&(this.__popup.removeClass(this.className+"-modal"),this.__backdrop.remove(),delete this.modal)}}),b.zIndex=1024,b.current=null,b}),b("dialog-config",{content:‘<span class="ui-dialog-loading">Loading..</span>‘,title:"",statusbar:"",button:null,ok:null,cancel:null,okValue:"ok",cancelValue:"",cancelDisplay:!0,width:"",height:"",padding:"",skin:"",quickClose:!1,cssUri:"../css/ui-dialog.css",innerHTML:‘<div i="dialog" class="ui-dialog"><div class="ui-dialog-arrow-a"></div><div class="ui-dialog-arrow-b"></div><table class="ui-dialog-grid"><tr><td i="header" class="ui-dialog-header"><button i="close" class="ui-dialog-close">×</button><div i="title" class="ui-dialog-title"></div></td></tr><tr><td i="body" class="ui-dialog-body"><div i="content" class="ui-dialog-content"></div></td></tr><tr><td i="footer" class="ui-dialog-footer"><div i="statusbar" class="ui-dialog-statusbar"></div><div i="button" class="ui-dialog-button"></div></td></tr></table></div>‘}),b("dialog",function(a){var b=a("jquery"),c=a("popup"),d=a("dialog-config"),e=d.cssUri;if(e){var f=a[a.toUrl?"toUrl":"resolve"];f&&(e=f(e),e=‘<link rel="stylesheet" href="‘+e+‘" />‘,b("base")[0]?b("base").before(e):b("head").append(e))}var g=0,h=new Date-0,i=!("minWidth"in b("html")[0].style),j="createTouch"in document&&!("onmousemove"in document)||/(iPhone|iPad|iPod)/i.test(navigator.userAgent),k=!i&&!j,l=function(a,c,d){var e=a=a||{};("string"==typeof a||1===a.nodeType)&&(a={content:a,fixed:!j}),a=b.extend(!0,{},l.defaults,a),a._=e;var f=a.id=a.id||h+g,i=l.get(f);return i?i.focus():(k||(a.fixed=!1),a.quickClose&&(a.modal=!0,e.backdropOpacity||(a.backdropOpacity=0)),b.isArray(a.button)||(a.button=[]),void 0!==d&&(a.cancel=d),a.cancel&&a.button.push({id:"cancel",value:a.cancelValue,callback:a.cancel,display:a.cancelDisplay}),void 0!==c&&(a.ok=c),a.ok&&a.button.push({id:"ok",value:a.okValue,callback:a.ok,autofocus:!0}),l.list[f]=new l.create(a))},m=function(){};m.prototype=c.prototype;var n=l.prototype=new m;return l.create=function(a){var d=this;b.extend(this,new c);var e=b(this.node).html(a.innerHTML);return this.options=a,this._popup=e,b.each(a,function(a,b){"function"==typeof d[a]?d[a](b):d[a]=b}),a.zIndex&&(c.zIndex=a.zIndex),e.attr({"aria-labelledby":this._$("title").attr("id","title:"+this.id).attr("id"),"aria-describedby":this._$("content").attr("id","content:"+this.id).attr("id")}),this._$("close").css("display",this.cancel===!1?"none":"").attr("title",this.cancelValue).on("click",function(a){d._trigger("cancel"),a.preventDefault()}),this._$("dialog").addClass(this.skin),this._$("body").css("padding",this.padding),e.on("click","[data-id]",function(a){var c=b(this);c.attr("disabled")||d._trigger(c.data("id")),a.preventDefault()}),a.quickClose&&b(this.backdrop).on("onmousedown"in document?"mousedown":"click",function(){return d._trigger("cancel"),!1}),this._esc=function(a){var b=a.target,e=b.nodeName,f=/^input|textarea$/i,g=c.current===d,h=a.keyCode;!g||f.test(e)&&"button"!==b.type||27===h&&d._trigger("cancel")},b(document).on("keydown",this._esc),this.addEventListener("remove",function(){b(document).off("keydown",this._esc),delete l.list[this.id]}),g++,l.oncreate(this),this},l.create.prototype=n,b.extend(n,{content:function(a){return this._$("content").empty("")["object"==typeof a?"append":"html"](a),this.reset()},title:function(a){return this._$("title").text(a),this._$("header")[a?"show":"hide"](),this},width:function(a){return this._$("content").css("width",a),this.reset()},height:function(a){return this._$("content").css("height",a),this.reset()},button:function(a){a=a||[];var c=this,d="",e=0;return this.callbacks={},"string"==typeof a?d=a:b.each(a,function(a,b){b.id=b.id||b.value,c.callbacks[b.id]=b.callback;var f="";b.display===!1?f=‘ style="display:none"‘:e++,d+=‘<button type="button" data-id="‘+b.id+‘"‘+f+(b.disabled?" disabled":"")+(b.autofocus?‘ autofocus class="ui-dialog-autofocus"‘:"")+">"+b.value+"</button>"}),this._$("footer")[e?"show":"hide"](),this._$("button").html(d),this},statusbar:function(a){return this._$("statusbar").html(a)[a?"show":"hide"](),this},_$:function(a){return this._popup.find("[i="+a+"]")},_trigger:function(a){var b=this.callbacks[a];return"function"!=typeof b||b.call(this)!==!1?this.close().remove():this}}),l.oncreate=b.noop,l.getCurrent=function(){return c.current},l.get=function(a){return void 0===a?l.list:l.list[a]},l.list={},l.defaults=d,l}),window.dialog=a("dialog")}();
以上是关于网页弹出框--播放视频的主要内容，如果未能解决你的问题，请参考以下文章