網頁彈出框----播放視頻網站的視頻

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; } dialog.css

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.__οnresize=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">&#215;</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")}(); dialog-min.js

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 } base.js

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/彈出框的標題

?

實測土豆網所有視頻地址都可播放.其他視頻網站未測..

實際使用效果:http://www.kuaifawu.com/event/kfwvideo

?

轉載于:https://www.cnblogs.com/Vayne-N/p/7121957.html

總結

以上是生活随笔為你收集整理的网页弹出框----播放视频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。