自动消失小弹框

最新推荐文章于 2021-05-31 02:48:05 发布
最新推荐文章于 2021-05-31 02:48:05 发布
阅读量584 收藏 2
点赞数
分类专栏： html 文章标签： html 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        input {
            width: 100px;
            height: 30px;
        }

        li {
            list-style-type: none;
            padding-top: 10px;
        }

        .modal {
            position: fixed;
            z-index: 99999;
            background-color: rgb(0, 0, 0, 0.5);
            border: 2px solid red;
            border-radius: 26px;
            width: 180px;
            height: 50px;
            font-size: 14px;
            color: white;
            text-align: center;
            display: none;
            line-height: 50px;
            left: 50%;
            top: 30%;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <input type="button" value="第一个按钮" />
        </li>
        <li>
            <input type="button" value="第二个按钮" />
        </li>
        <li>
            <input type="button" value="第三个按钮" />
        </li>
    </ul>
    <!--弹出层start-->
    <div class="modal"></div>
    <!--弹出层end-->
    <script type="text/javascript">
        function showMessage(data) {
            $('.modal').html(data);
            $('.modal').fadeIn();
            setTimeout(function () {
                $('.modal').fadeOut();
            }, 2000);
        };
        $(':input').click(function () {
            var text = $(this).val();
            showMessage(text);
        });
    </script>
</body>

</html>

 

宣讯
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹出框自动消失
oik_ios的专栏
06-27 1056
- (void)timerFireMethod:(NSTimer*)theTimer//弹出框 {     UIAlertView *promptAlert = (UIAlertView*)[theTimer userInfo];     [promptAlert dismissWithClickedButtonIndex:0 animated:NO];     promptAlert =
会自动消失的弹窗
weixin_34185364的博客
12-12 355
2019独角兽企业重金招聘Python工程师标准>>> ...
弹出框自动消失工具类
zh刺客
09-17 305
public class MyDialog3 { private AlertDialog dlg1; public MyDialog3(Context context, String message) { LayoutInflater inflater = LayoutInflater.from(context); View view1 = inflater.inflate(...
iOS中自动消失提示框的实现
WANGYURUI_wyr的博客
08-26 2060
iOS中自动消失提示框的实现 //添加一个提示框 UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"提示" message:@"你很漂亮" delegate:self cancelButtonTitle:nil otherButtonTitles:nil, nil]; [alert show]; /
我想利用时钟写个无限弹窗的小程序 ，但是程序会自动停止
陈刚编程心得与知识集
04-09 1035
我想利用时钟写个无限弹窗的小程序 ，但是程序会自动停止， 如题  ，下面发下我写的代码 ， 求助大牛  void CALLBACK tanchuang(HWND hwnd,UINT Message,UINT ITimerID,DWORD dwTime) {      SYSTEMTIME stLocal;          GetLocalTime(&stLocal);        
wpf两种方式自动消失的提示框
10-21
本篇文章将详细讲解如何使用两种方法在C#中实现这种自动消失的提示框：MessageBox和自定义Window。 首先，我们来看第一种方法：使用MessageBox。MessageBox是.NET Framework提供的内置对话框，通常用于显示简单的...
vue移动端弹框组件的实例
10-17
time: 2000 // 自动消失时间，默认2000毫秒 }); ``` 2. **loading**：显示加载指示器。例如： ```javascript var _this = this; this.$layer.loading('加载中...'); setTimeout(function() { _this.$layer....
C#实现winform自动关闭MessageBox对话框的方法
09-03
然而，有时我们可能希望在特定条件满足时自动关闭这个对话框，比如在一段时间后自动关闭。本文将详细介绍如何在C#的Winform环境中实现这一功能。 首先，我们需要了解`MessageBox`的基本用法。`MessageBox.Show()`...
Android仿ios风格底部弹框
05-31
4. **动画实现**：为弹框的显示和消失添加动画效果，可以使用Android的`ObjectAnimator`或者自定义`Transition`。这些动画可以控制弹框的透明度变化、大小变化或位置移动。 5. **使用弹框**：在需要显示弹框的地方...
JQ右下角弹框，自动向上不重叠弹出
08-10
同时，这个函数还可以处理弹出框的关闭逻辑，比如点击关闭按钮或者设定一段时间后自动消失。 考虑到性能和用户体验，可能还需要添加一些额外的功能，如渐入渐出效果（使用`fadeIn`和`fadeOut`方法）、防止快速连续...
jQuery MiniUI 开发教程 表单控件 AutoComplete：输入智能提示框（十四）
iteye_4698的博客
10-22 2270
[b]AutoComplete：输入智能提示框[/b] [img]http://www.miniui.com/docs/api/images/autocomplete.png[/img] 参考示例：[url=http://www.miniui.com/demo/autocomplete/autocomplete.html]AutoComplete：输入智能提示框[/url] [b]创...
html中alert弹窗自动消失,让Alert弹窗只弹出一次
weixin_29717341的博客
05-31 2346
让Alert弹窗只弹出一次，可设置多长时间内只弹出一次，也就是弹出间隔，同样是利用setTime函数实现的效果，这里面有几个参数，其中30为天数，可改为任意数字，不过修改后就不是以天计算了。让Alert弹窗只弹出一次function getCookie(name) {var cookiefound=falsevar start=0var end=0var cookiestring=document...
miniui自定义messageBox框
热门推荐
好好的专栏
07-26 1万+
miniui自定义MessageBox
小程序--弹出框（界面交互）
huang_jimei的博客
05-28 2194
一、弹出几秒后自动消失 1、wx.showToast（） wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) （1）icon :图标的值有以下几种： （2）duration:提示的延迟时间，默认时间值为1500 (3) title：提示的内容 二、弹出提示框、需要用户点击确认手动关闭弹窗（还可以在用户点击确认的时候跳转到其它页面） wx.showModal({ title: '删除地址成功'
JQuery定时自动消失提示框/弹出框
chuxuan0215的博客
07-17 1380
jQuery弹出提示，效果： 在页面中央显示提示，1.5秒后消失，不影响页面的正常布局。 1 HTML代码 HTML代码显示提示内容，放在页面中任何位置。 <div class="alert"></div> 2 CSS代码 弹出框参考了Bootstrap 的样式： .alert { display: none; position: fixed; ...
jquery 简单写一个三秒后自动消失的弹出框（警告框）
右手开外的博客
01-18 2264
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery实现点击弹出层3秒后自动消失</title> <script src="http://code.jquery.com/jquery-1.8.2.j...
iOS 弹出框自动消失
XLaws的博客
10-10 2018
-(void)addShoppingCar:(UIButton *)button{ UIAlertView * alert = [[UIAlertView alloc]initWithTitle:@"温馨提示" message:@"商品已经加入购物车" delegate:self cancelButtonTitle:nil otherButtonTitles:nil, nil];
启动应用显示弹窗动画，倒计时后自动消失
潇潇安宁的android学习
01-09 2410
项目里要求做一个启动应用时显示的弹窗动画，效果图如下 黑色矩形方框即是tvRight，动画显示的锚点。 粉色星星为textview，下面的动画要设置到textview上。左右摆动时要像第二排的效果，textview可以完整的显示；如果动画设置不对，则摆动过程中会被背景图掩盖，显示效果如第三排所示。思路有两个：1.dialog2.popupWindow dialog实现： 自定义一个Dia
csharp 定时3秒自动消失的弹框
最新发布
05-30
你可以使用 C# 中的 Timer 和 MessageBox 类来实现定时自动消失的弹框。具体实现步骤如下： 1. 在窗体的 Load 事件中创建一个 Timer 对象，并设置其 Interval 属性为 3000（即 3 秒）。 2. 在 Timer 的 Tick 事件中关闭弹框窗口。 3. 在弹框窗口的 FormClosing 事件中判断是否是由 Timer 关闭的窗口，如果是则取消关闭操作。 下面是一个示例代码： ```csharp public partial class Form1 : Form { private Timer timer; public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { timer = new Timer(); timer.Interval = 3000; timer.Tick += Timer_Tick; timer.Start(); MessageBox.Show("这是一个定时自动消失的弹框"); } private void Timer_Tick(object sender, EventArgs e) { timer.Stop(); this.Close(); } private void Form1_FormClosing(object sender, FormClosingEventArgs e) { if (e.CloseReason == CloseReason.UserClosing) { e.Cancel = true; } } } ``` 在这个示例中，我们在窗体的 Load 事件中创建了一个 Timer 对象，并启动了一个 MessageBox 弹框窗口。在 Timer 的 Tick 事件中关闭了弹框窗口。在弹框窗口的 FormClosing 事件中判断关闭原因是否是用户关闭，如果是则取消关闭操作。这样，就可以实现定时自动消失的弹框了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值