整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

window弹出、提示框

、警告框(alert / window.alert)

alert("文本");

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

2、确认框(confirm / window.confirm)

confirm("文本")

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

prompt(text,defaulText);输入文字对话框,text:对话框显示纯文本(而不是HTML格式文本);defaultText,默认文本。

3、提示框(prompt / window.prompt)

prompt("文本","默认值")

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

注:弹出框换行用“ /n ”;

4、console.log();控制台打印内容;

推荐阅读:

JavaScript基础知识系列:不再彷徨:完全弄懂JavaScript中的this

面试:JavaScript基础篇

JavaScript基础知识系列:判断类型(上)

js 中原型和原型链深入理解

序员必须小知识:Js各种弹出框展示

程序员必须小知识:Js各种弹出框展示

1.用页面展示出有哪几种弹出方式:

<body>

<div>

<a href="#" onclick="show1()">show</a> |

<a href="#" onclick="show2()">slide</a> |

<a href="#" onclick="show3()">fade</a> |

</div>

<div>

<a href="#" onclick="alert1()">alert</a> |

<a href="#" onclick="alert2()">alert(error)</a> |

<a href="#" onclick="alert3()">alert(info)</a> |

<a href="#" onclick="alert4()">alert(question)</a> |

<a href="#" onclick="alert5()">alert(warning)</a>

</div>

<div>

<a href="#" onclick="confirm1()">confirm</a>

</div>

<div>

<a href="#" onclick="prompt1()">prompt</a>

</div>

</body>

2.用CSS对个弹出框来修饰样式;

3.用js来实现各种弹出框:

<link rel="stylesheet" type="text/css" href="css/dialog.css">

<link rel="stylesheet" type="text/css" href="css/icon.css">

<link rel="stylesheet" type="text/css" href="css/linkbutton.css">

<link rel="stylesheet" type="text/css" href="css/shadow.css">

<link rel="stylesheet" type="text/css" href="css/messager.css">

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/jquery.draggable.js"></script>

<script type="text/javascript" src="js/jquery.resizable.js"></script>

<script type="text/javascript" src="js/jquery.linkbutton.js"></script>

<script type="text/javascript" src="js/jquery.shadow.js"></script>

<script type="text/javascript" src="js/jquery.dialog.js"></script>

<script type="text/javascript" src="js/jquery.messager.js"></script>

<script>

function show1(){

$.messager.show({

title:'My Title',

msg:'Message will be closed after 4 seconds.',

showType:'show'

});

}

function show2(){

$.messager.show({

title:'My Title',

msg:'Message will be closed after 5 seconds.',

timeout:5000,

showType:'slide'

});

}

function show3(){

$.messager.show({

title:'My Title',

msg:'Message never be closed.',

timeout:0,

showType:'fade'

});

}

function alert1(){

$.messager.alert('My Title','Here is a message!');

}

function alert2(){

$.messager.alert('My Title','Here is a error message!','error');

}

function alert3(){

$.messager.alert('My Title','Here is a info message!','info');

}

function alert4(){

$.messager.alert('My Title','Here is a question message!','question');

}

function alert5(){

$.messager.alert('My Title','Here is a warning message!','warning');

}

function confirm1(){

$.messager.confirm('My Title', 'Are you confirm this?', function(r){

alert('confirmed:'+r);

});

}

function prompt1(){

$.messager.prompt('My Title', 'Please type something', function(r){

if (r){

alert('you type:'+r);

}

});

}

</script>

版权归属:康诺科技

2017/7/18

TML+CSS+JS自主设计弹出窗口的方法,在线编辑器

html怎么弹出一个小窗口

html弹出一个小窗口的方法可能有很多,就比如本站(笨鸟工具-璞玉天成,大器晚成)的导航栏点击之后会有一个小窗口(小页面)弹出,然后文章页面的底部有两个小图标,当鼠标悬放在上面的时候,也可以弹出一个小窗口,然后点击下方实例代码的试一试按钮,也可以弹出一个小窗口,是本站提供的HTML+css+javascript的在线编辑器。这里介绍的一简单的方法和一种自主设计的方法,不需要很复杂的程序设计,也不需要框架,用javascript和css就可以:

HTML+CSS+JS自主设计弹出窗口的方法,在线编辑器

自主设计html弹出小窗口的方法

这个方法需要结合html、css和javascript三种语言,即web三件套全得用上。该方法的原理就是将本来的窗口的style中display设置为none,当点击按钮之后,设置为block,并为该窗口绑定位置,实例代码如下:

<div id="ck1"><p style='text-align:center;line-height:80px;'>这个窗口,可以说是自己设计的了,可以在这里添加其它的标签和功能</p></div>
<button class='btn btn-default' onclick='show2()'>点击弹出自己设计的小窗口</button>
<style>
  #ck1{display:none;position:fixed;top:20%;left:20%;width:50%;height:80px;z-index:9999;background-color:skyblue;border-radius:5px;}
</style>
<script>
  function show2(){
  	document.getElementById("ck1").style.display = "block";
  }
</script>

HTML+CSS+JS自主设计弹出窗口的方法,在线编辑器

代码解析

这个自主设计的方法中,除了display属性的设置之外,另一个关键点在于z-index值的设置,html元素的排列堆叠,不仅有水平方向、竖直方向,还有深度方向,就像立体的直角坐标系当中,不仅有x轴、y轴,还有z轴,即z-index的设置可以修改div或html元素的z轴位置。

HTML+CSS+JS在线编辑器可以参考原文

原文地址:html怎么弹出一个小窗口,自主设计方法,在线编辑器 - HTML教程