HTML弹框用法介绍

一、弹框是什么

弹框是一种常见的用户交互界面，通常出现在用户需要输入信息、作出选择等操作时，以便给用户提供一种更加友好、直观的操作方式。

在HTML中，可以通过使用一系列的标签和属性，来创建各种弹窗，例如alert、confirm、prompt以及自定义弹窗等。

二、弹框的种类

1、alert弹框

alert弹框用于向用户显示一些提示信息，通常带有一个“OK”按钮，单击该按钮弹框消失。可以使用JavaScript中的alert函数来创建alert弹框。

 alert("您的操作已完成！");

2、confirm弹框

confirm弹框类似于alert弹框，但是它提供了“确定”和“取消”两个按钮，并返回用户的选择结果，通常用于需要用户做出确认或取消操作的情况。可以使用JavaScript中的confirm函数来创建confirm弹框。

 var r = confirm("您确定要删除吗？");
    if (r == true) {
        // 用户点击了“确定”按钮
    } else {
        // 用户点击了“取消”按钮
    }

3、prompt弹框

prompt弹框用于向用户请求输入一些信息，通常带有一个文本框和一个“确定”按钮和“取消”按钮。用户输入信息并单击“确定”按钮后，会返回用户输入的文本值；用户单击“取消”按钮则返回null值。可以使用JavaScript中的prompt函数来创建prompt弹框。

 var name=prompt("请输入您的姓名：","");
    if (name!=null && name!="") {
        alert("欢迎您，"+name+"！");
    }

4、自定义弹窗

在HTML中，可以通过CSS和JavaScript实现自定义的弹窗。通常的实现方法是，创建一个遮罩层和一个弹窗层，将弹窗层放在遮罩层中间，并通过JavaScript来控制遮罩层和弹窗层的显示和隐藏。

/* CSS代码 */
.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    width: 300px;
    height: 200px;
    border: 1px solid #cccccc;
    z-index: 10000;
}

/* HTML代码 */ 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com