<!DOCTYPE html><html><head lang=
"en"
> <meta charset=
"UTF-8"
> <style> *{padding: 0; margin: 0;} html{ height: 100%; } body{ font-size: 16px; font-family:
"Microsoft Yahei"
; height: 100%; } h1,h2,h3{ font-weight: lighter; } a{ text-decoration: none; } #selfWinsow{ width: 60%; margin: 0 20%; background: #fff; position: fixed;top: 35%;border: 1px solid #ccc; padding: 0 2% 2% 2%; } #slefClose{ width: 25px; height: 25px; position: absolute;right: 1rem; top: 0.4rem; z-index: 9999; cursor: pointer; } #slefClose::after{ position: absolute; width: 30px; height: 30px; content:
"×"
; font-size: 2.5rem; line-height: 30px; } #selfWinsow h2{ font-size: 1rem; border-bottom: 1px solid #ccc; line-height: 100%; padding:1rem 0; } #selInfo{ font-size: 0.95rem; line-height: 2.1rem; padding: 0.5rem; } #selfBtBox{ padding: 1rem; margin: 0px auto; border: 1px solid #ccc; overflow: hidden; } .selfBt{ padding: 0.8rem 2%;background: #323434; color: #fff; float: left; line-height: 100%; text-align: center; cursor: pointer; } .selfBtDouble{ width: 46%; } .selfBtSingle{ color: #fff; width: 100%; padding: 0.8rem 0; } #selfOk{ background: #323434; } .selftalkNo{ float: left; position: relative; top: -5px; padding: 4px 10px; display: inline-block; margin-left: 5px; color: #000; } .selftalkOk{ float: right; position: relative; top: -5px; display: inline-block; margin-right: 5px; padding: 4px 10px; color: #fff; } #selfNo,#linkTo2{ background: #eeeeee; color: #555555 } #selfBack{ width: 100%; background: rgba(0,0,0,.6); } #selfInput{ display: block; width: 100%; padding: 0.5rem 0; border: 1px solid #eee; border-radius: 3px; margin-bottom: 1rem; text-indent: 0.6rem } #selfInput:focus{ border: 1px solid #087690; } </style> <title></title> <script src=
"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"
></script> <!--<script type=
"text/javascript"
src=
"SelfWindow.js"
></script>--> <script>
var
SelfWinsow =
function
(settings){this.init(settings)};SelfWinsow.prototype = { init:
function
(settings){ this.opts = { types :
""
, slefTitle :
""
, selfInfo : typeof settings ==
"string"
? settings :
"if have any incorrect , and you will continue?"
, selfOk :
"continue operator the deposit"
, selfNo :
"back loading page"
}; this.setting(settings);
if
(typeof settings ==
"string"
){ this.opts.selfInfo == settings; }
if
(settings ==
""
|| settings == undefined || settings == null){ this.selfAlert(); }
else
if
(settings.types ==
"confirm"
){ this.selfConfirm(); }
else
if
(settings.types ==
"confirm2"
){ this.selfConfirm2(); }
else
if
(settings.types ==
"link"
){ this.selfLink(); }
else
if
(settings.types==
"talk"
){ this.selfMobileTalk(); }
else
{ this.selfAlert(); } }, //confirm窗口 selfConfirm:
function
(){
var
_this = this;
var
html=
"<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"
+_this.opts.slefTitle+
"<\/h2><p id='selInfo'>"
+_this.opts.selfInfo+
"<\/p><div id='selfOk' class='selfBt selfBtDouble'>"
+_this.opts.selfOk+
"<\/div><div id='selfNo' class='selfBt selfBtDouble'>"
+_this.opts.selfNo+
"<\/div><\/div>"
; this.createMask(html); this.selfEvents(); }, //alert窗口 selfAlert:
function
(){
var
_this = this;
var
html=
"<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"
+_this.opts.slefTitle+
"<\/h2><p id='selInfo'>"
+_this.opts.selfInfo+
"<\/p><div id='selfOk' class='selfBt selfBtSingle'>"
+_this.opts.selfOk+
"<\/div><\/div>"
; this.createMask(html); this.selfEvents(); }, selfConfirm2:
function
(){
var
_this = this;
var
html=
"<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"
+_this.opts.slefTitle+
"<\/h2><p id='selInfo'>"
+_this.opts.selfInfo+
"<\/p><div id='selfOk' class='selfBt selfBtSingle'>"
+_this.opts.selfOk+
"<\/div><\/div>"
; this.createMask(html); this.selfEvents(); }, //带链接窗口 selfLink:
function
(){
var
_this = this;
var
html=
"<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"
+_this.opts.slefTitle+
"<\/h2><p id='selInfo'>"
+_this.opts.selfInfo+
"<\/p><a id='selfOk' href='"
+_this.opts.linkTo1+
"' class='selfBt selfBtDouble'>"
+_this.opts.selfOk+
"<\/a><a id='linkTo2' href='"
+_this.opts.linkTo2+
"' class='selfBt selfBtDouble'>"
+_this.opts.selfNo+
"<\/div><\/div>"
; this.createMask(html); this.selfEvents(); }, selfMobileTalk:
function
(){
var
_this = this;
var
html=
"<div id='selfWinsow' style='width:100%;margin:0px;top:0;left:0;padding:0; background:none;border:none;font-size:16px'><h2 style='text-align:center; background:#fff' id='slefTitle'><span id='selfNo' style='background:#fff;cursor: pointer;' class='selftalkNo'>"
+_this.opts.selfNo+
"<\/span>"
+_this.opts.slefTitle+
"<b id='selfOk' style='background:#fff;color:#ff0028;cursor: pointer;' class='selftalkOk'>"
+_this.opts.selfOk+
"<\/b><\/h2><textarea style='width:90%; border:1px solid #ccc; font-size:14px; display:block; margin:10px auto; height:120px' id='selfTextarea' placeholder='请填写您的特殊要求'><\/textarea><\/div>"
; this.createMask(html);
var
selfBack = document.getElementById(
"selfBack"
); selfBack.style.backgroundColor=
"#eee"
; this.selfEvents(); }, //事件处理 selfEvents:
function
(){ this.selfOk();
var
selfNo = document.getElementById(
'selfNo'
); selfNo && this.slefNo(); }, //确定按钮事件 selfOk:
function
(){
var
_this = this;
var
type = this.opts.types;
var
bt=true;
var
selfOk = document.getElementById(
"selfOk"
);
function
selfOkFun(e){
var
e = e || window.event;
var
el = e.scrElement || e.target;
if
(el.id ==
"selfOk"
|| el.tagName==
"IMG"
) {
if
(type ==
"alert"
){ _this.selfRemoveBack(); }
else
if
(type ==
"confirm"
|| type ==
"talk"
||
"confirm2"
){
if
(bt){ _this.opts.callback(); }
else
{
return
false; } _this.selfRemoveBack(); bt=false; } } } document.removeEventListener(
'click'
,selfOkFun,false); document.addEventListener(
'click'
,selfOkFun,false); }, //创建背景遮罩 createMask:
function
(html){
var
selfBack = document.getElementById(
"selfBack"
);
if
(selfBack){
return
false; }
else
{
var
selfBack=document.createElement(
'div'
); selfBack.id =
"selfBack"
; selfBack.style.position =
"fixed"
, selfBack.style.top =
"0"
, selfBack.style.left =
"0"
, selfBack.style.right =
"0"
, selfBack.style.bottom =
"0"
, document.body.appendChild(selfBack); selfBack.innerHTML = html; this.slefClose(); } }, //关闭按钮事件 slefClose:
function
(){
var
_this = this; document.addEventListener(
'click'
,
function
(e){
var
e = e || window.event;
var
el = e.scrElement || e.target;
if
(el.id ==
"slefClose"
){
if
(_this.opts.callback){ _this.opts.callback =
function
(){}; _this.selfRemoveBack();
return
; } _this.selfRemoveBack(); } }); }, //拒绝或者否认按钮事件 slefNo:
function
(){
var
_this = this; document.addEventListener(
'click'
,
function
(e){
var
e = e || window.event;
var
el = e.scrElement || e.target;
if
(el.id ==
"selfNo"
||el.tagName ==
"IMG"
){
if
(_this.opts.callback){ _this.opts.callback =
function
(){}; _this.selfRemoveBack();
return
; } _this.selfRemoveBack(); } }) }, //移除窗口功能 selfRemoveBack:
function
(){
try
{
var
selfBack = document.getElementById(
'selfBack'
) document.body.removeChild(selfBack); }
catch
(e){} }, //参数配置功能函数 exetends:
function
(a,b){
for
(
var
attr in b){ a[attr] = b[attr]; } }, //参数配置以及重写 setting:
function
(settings){ this.exetends(this.opts,settings) }, } </script> <script> window.onload =
function
(){
var
Ord1 = document.getElementById(
"rd1"
);
var
Ord2 = document.getElementById(
"rd2"
);
var
Otext = document.getElementById(
"text"
);
var
Obtn = document.getElementById(
"btn"
);
var
browser = navigator.appName;
var
getText
=
function
(objText){
return
objText.value; }
var
text =
getText
(Otext);
var
len= text.length; Otext.disabled = true;
var
aadEvent =
function
(e, type, target){ e = e || window.e;
if
(e.addEventListener){ e.addEventListener(type,
function
(){
if
(e.id ==
'rd2'
){ target.disabled = false;
var
selfConfirm =
new
SelfWinsow({ slefTitle :
"option tips for user"
, types :
"confirm"
, selfInfo : typeof settings ==
"string"
? settings :
"if have any incorrect , and you will continue?"
, selfOk :
"continue operator the deposit"
, selfNo :
"back loading page"
, callback:
function
(){} }); }
else
if
(e.id ==
'rd1'
){ target.innerIext =
''
; target.value =
''
; target.textContent =
""
; target.disabled = true; }
else
if
(e.id ==
'btn'
){
var
text =
getText
(target);
var
len= text.length;
if
(target.disabled==false && len == 0){
var
selfConfirm =
new
SelfWinsow({ slefTitle :
"option tips for user"
, types :
"alert"
, selfInfo : typeof settings ==
"string"
? settings :
"please input textarea content for customer"
, selfOk :
"OK"
, callback:
function
(){} }); } } }, false); }
else
if
(e.attachEvent){ e.attachEvent(
'on'
+
'type'
,
function
(){
if
(e.id ==
'rd2'
){ target.disabled = false;
var
selfConfirm =
new
SelfWinsow({ types :
"confirm"
, callback:
function
(){} }); }
else
if
(e.id ==
'rd1'
){ target.innerIext =
''
; target.value =
''
; target.textContent =
""
; target.disabled = true; }
else
if
(e.id ==
'btn'
){
var
text =
getText
(target);
var
len= text.length;
if
(target.disabled==false && len == 0){
var
selfConfirm =
new
SelfWinsow({ slefTitle :
"option tips for user"
, types :
"alert"
, selfInfo : typeof settings ==
"string"
? settings :
"please input textarea content for customer"
, selfOk :
"OK"
, callback:
function
(){} }); } } }, false); } }; aadEvent(Ord2,
'click'
, Otext); aadEvent(Ord1,
'click'
, Otext); aadEvent(Obtn,
'click'
, Otext);} </script></head><body style=
"width:80%; margin: 20% auto;"
> <form action=
""
method=
"get"
> <input id=
"rd1"
form=
"btn"
type=
"radio"
value=
"11111"
name=
"radio"
checked=true>first time purchase<br/><br/> <section style=
"float:left;"
> <input id=
"rd2"
form=
"btn"
type=
"radio"
value=
"22222"
name=
"radio"
>Alternate(s) offer:</section> <section style=
"float:left; margin:10px 10px"
> <textarea id=
"text"
form=
"btn"
cols=
"30"
rows=
"7"
maxlength=
"100"
style=
"width:600px;"
></textarea> </section> </form> <footer style=
"clear:both; float:right; margin-right:10%;"
> <input id=
"btn"
name=
"btn"
type=
"submit"
value=
"Next"
style=
"width:60px; height:30px"
> </footer></body></html>