HTML5+CSS3+JavaScript Web前端开发案例教程课件：弹窗可以这样做.pptxVIP

弹窗可以这样做

浏览器默认弹窗

自定义弹窗

Layer弹框插件

01

02

03

01浏览器默认弹窗

浏览器默认弹窗

alert()方法用于显示带有一条指定消息和一个确认按钮的警告框。

浏览器默认弹窗

confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。

浏览器默认弹窗

confirm()方法的返回值为true时，表示用户点击了弹窗的【确定】按钮。

浏览器默认弹窗

prompt()方法用于显示可提示用户进行输入的对话框。

浏览器默认弹窗

prompt()方法的返回值为用户输入的内容字符串。

02自定义弹窗

自定义弹框

技术准备：

Flex弹性盒子布局；

CSSz-index层级属性；

CSSdisplay显示与隐藏；

JavaScriptEvents事件对象；

03Layer弹窗插件

Layer弹窗插件

简介：

Layer是一款备受开发者青睐的Web弹出层组件，具备全方位的解决方案，面向各个水平段的开发人员，页面可以轻松地拥有丰富友好的操作体验。

gitee地址：

Layer弹窗插件

Layer插件的使用

方法一：作为独立组件使用

下载layer独立组件包；

需要在页面先引入jQuery1.8以上的任意版本；

然后再引入layer.js

Layer弹窗插件

Layer插件的使用

方法二：layui模块化使用

下载layui项目：gitclone

在页面中引入layui.css和layui.js；

示例代码：

layui.use(layer,function(){

varlayer=layui.layer;

layer.msg(hello);

});