javascript按钮特效--- 删除时弹出确认提示

javascript按钮特效--- 删除时弹出确认提示

如果用户不小心单击了“删除”按钮,则会损失一些重要的数据。为了让删除操作更安全,通常在用户单击“删除”按钮后,给出一个提示,让用户确认此次操作是否正确。代码如下:

<!DOCTYPE html>
<html >

<head>
<meta charset="utf-8"/>
    <title>标题页</title>

    <script language="javascript">

     function del()

    {

       if(confirm("确实删除吗?"))

          alert("已经删除!");

       else

          alert("已经取消了删除操作");

    }

    </script>

</head>

<body>

<input id="Button1" type="button" value="删除" οnclick="del()" />

</body>

</html>

效果

 

 

可以使用jQuery插件来制作弹出提示消息特效,比较常用的插件包括: 1. jQuery UI Dialog:是一个基于 jQuery UI 的弹出组件,可以轻松创建弹出和对话。具有许多自定义选项和主题,可以在其官方文档中找到。 2. Bootstrap Modal:Bootstrap 是一个流行的前端架,Modal 是其中的一个弹出层组件。它具有灵活的选项,可以自定义标题、内容和按钮等。 3. SweetAlert:是一个弹出插件,具有简单易用的 API 和漂亮的设计。可以轻松创建各种弹出,包括警告、确认和输入。 这些插件都可以通过引入相应的 CSS 和 JavaScript 文件来使用。例如,引入 jQuery UI Dialog 的代码如下: ```html <!-- 引入 jQuery 和 jQuery UI --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <!-- 创建一个按钮 --> <button id="myButton">点击弹出层</button> <!-- 引入 JavaScript 文件并初始化 Dialog --> <script src="path/to/jquery-ui-dialog.js"></script> <script> $(function() { $("#myButton").on("click", function() { $("#myDialog").dialog(); }); }); </script> <!-- 创建一个弹出层 --> <div id="myDialog" title="提示"> <p>这是一个弹出层。</p> </div> ``` 这样就可以创建一个简单的弹出提示消息特效。如果需要更多自定义选项,可以查阅相关的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值