js弹出框、对话框、提示框、弹窗实现方法总结(推荐)

JS弹出框、对话框、提示框、弹窗实现方法总结

本篇文章将讲解JS弹出框、对话框、提示框、弹窗的实现方法，并提供两个示例以便更好地理解。

弹出框的实现

使用alert()函数

alert()函数是JS提供的一种简单的弹窗实现方式，当需要在浏览器中弹出一些简单的信息提示时可以方便地使用该函数。

alert('Hello world!');

使用confirm()函数

confirm()函数和alert()函数类似，但是该函数将返回用户的确认结果，可以用来实现用户操作的确认或取消操作。当用户点击确认时返回true，当用户点击取消时返回false。

if(confirm('Are you sure you want to delete this item?')){
    // 删除操作
}else{
    // 取消操作
}

使用prompt()函数

prompt()函数可以用来实现弹出一个输入框，可以让用户输入一些信息。

let name = prompt('Please enter your name:');
console.log('Hello, ' + name + '!');

对话框的实现

使用window.showModalDialog()函数

showModalDialog()函数可以用来弹出一个模态对话框，里面可以包含任何想要展示给用户的信息或者交互操作。该函数的语法如下：

window.showModalDialog(url, name, features)

其中url表示弹出对话框的URL地址；name表示弹出对话框的名称，可以在JavaScript中使用该名称来引用对话框；features表示弹出对话框的特性。

以下是一个示例：

function showModalDialogDemo(){
    window.showModalDialog('test.html', 'test', 'dialogWidth:500px;dialogHeight:300px;resizable:yes;');
}

<button onclick="showModalDialogDemo()">弹出对话框</button>

提示框的实现

使用toastr插件

toastr是一个简单易用的提示框插件，可以用来实现在页面中弹出各种类型的提示信息。

下载地址：https://github.com/CodeSeven/toastr

以下是一个示例：

<link rel="stylesheet" href="toastr/toastr.css">
<script src="toastr/toastr.js"></script>

<script>
    function showToastDemo(){
        toastr.success('Hello world!');
    }
</script>

<button onclick="showToastDemo()">弹出提示框</button>

弹窗的实现

使用layer插件

layer是一个非常流行的弹窗插件，可以用来实现各种类型的弹窗。

下载地址：http://layer.layui.com/

以下是一个示例：

<link rel="stylesheet" href="layer/theme/default/layer.css">
<script src="layer/layer.js"></script>

<script>
    function showLayerDemo(){
        layer.open({
            title: 'Hello world!',
            content: 'This is my first layer'
        });
    }
</script>

<button onclick="showLayerDemo()">弹出弹窗</button>

以上就是JS弹出框、对话框、提示框、弹窗实现方法总结的攻略。希望对您有所帮助。