时间:2021-07-01 10:21:17 帮助过:41人阅读
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>
/*
*selfWindow组建,主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果,
*因为给予移动web,所以没有兼容低版本ie
*调用方法:var win = new SelfWinsow({
* types : "confirm",//这里可以选择的参数有,alert,confirm,confirm2,link
* slefTitle : "香送网温馨提示",//弹窗标题
* selfInfo : "Are you really to remove this tool?",//弹窗信息
* selfOk : "YES",//自定义确定按钮文字
* selfNo : "NO",//自定义否认按钮文字
* callback:fn,//当types为confirm,confirm2或者是talk时的回调函数,confirm为模拟
*/
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>"+_this.opts.slefTitle+"<\/h2>"+_this.opts.selfInfo+"<\/p>"+_this.opts.selfOk+"<\/div>"+_this.opts.selfNo+"<\/div><\/div>";
this.createMask(html);
this.selfEvents();
},
//alert窗口
selfAlert:function(){
var _this = this;
var html="<\/div>"+_this.opts.slefTitle+"<\/h2>"+_this.opts.selfInfo+"<\/p>"+_this.opts.selfOk+"<\/div><\/div>";
this.createMask(html);
this.selfEvents();
},
selfConfirm2:function(){
var _this = this;
var html="<\/div>"+_this.opts.slefTitle+"<\/h2>"+_this.opts.selfInfo+"<\/p>"+_this.opts.selfOk+"<\/div><\/div>";
this.createMask(html);
this.selfEvents();
},
//带链接窗口
selfLink:function(){
var _this = this;
var html="<\/div>"+_this.opts.slefTitle+"<\/h2>"+_this.opts.selfInfo+"<\/p>"+_this.opts.linkTo1+"' class='selfBt selfBtDouble'>"+_this.opts.selfOk+"<\/a>"+_this.opts.linkTo2+"' class='selfBt selfBtDouble'>"+_this.opts.selfNo+"<\/div><\/div>";
this.createMask(html);
this.selfEvents();
},
selfMobileTalk:function(){
var _this = this;
var html=""+_this.opts.selfNo+"<\/span>"+_this.opts.slefTitle+""+_this.opts.selfOk+"<\/b><\/h2>";
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 = "selfBac
人气教程排行
-
230次
1
如何生成一个调查问卷_html/css_WEB-ITnose
-
230次
2
在页面直接显示日历_html/css_WEB-ITnose
-
230次
3
如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作
-
229次
4
关于列表标记的详细介绍
-
229次
5
cssborder-bottom(指定下边线的样式、宽度及颜色)
-
229次
6
html新闻详情页_html/css_WEB-ITnose
-
229次
7
为何页面内容和网页边缘有空隙_html/css_WEB-ITnose
-
228次
8
position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose
-
227次
9
htmlp标签怎么换行?htmlp标签添加br换行标签的应用
-
226次
10
HTML的<!DOCTYPE>标签
-
226次
11
html页面中友情链接怎么进行添加设置?(代码示例)
-
226次
12
form表单中属性及功能应用介绍汇总
-
226次
13
详解form标签中的method属性
-
226次
14
HTML5Canvas逼真烟雾效果js插件
-
226次
15
页面跳转特效_html/css_WEB-ITnose
-
226次
16
改变鼠标选中区域的样式。_html/css_WEB-ITnose
-
225次
17
关于$("body").append()一段html代码,在页面写能触发事件,写在js文件里写就没有_html/css_WEB-ITnose
-
225次
18
CSS3悬浮动画效果_html/css_WEB-ITnose
-
225次
19
纯C语言实现的CSS解析器:katana_html/css_WEB-ITnose
-
225次
20
body在默认情况下是具有margin外边距的_html/css_WEB-ITnose