首页 > 其他分享 >css+jquery右下角弹框提示框(工作需要就开发调式了)

css+jquery右下角弹框提示框(工作需要就开发调式了)

时间:2023-12-28 11:23:13浏览次数:35  
标签:jquery 弹框 tip height 400px 提示框 border css

使用时调用:

addTip();
setTimeout("closeTip();",1000);
setTimeout("removeTip();",2000);

 

//添加提示框
function addTip() {
    var tip = "    <div  id='tip'>"+
    "    <div class='tip-header'>提示信息"+
    "    <span style='margin-left: 150px;text-decoration: none;'><a href='javascript:void(0);' onclick='closeTip()'>x</a></span>"+
    "  </div>"+
    "    <div class='tip-body'>操作成功</div>"+
    "    </div>";
      $('body').append(tip);
}
//关闭提示框
function closeTip() {
    $("#tip").css("-webkit-transform","translate(0, 400px)");
}
//移除提示框
function removeTip() {
    $("#tip").remove();
}
js代码

 

/* 提示框样式 开始 */
#tip {
    border: 1px solid #E8E8E8;
    border-radius: 2%;
    background-color: #b8f4bc;
    /*         position: absolute;
    top: 8%;
    left: 15%; */
    position: fixed;
    /*     width: 400px;
    height: 400px; */
    width: 250px;
    height: 200px;
    right: 2%;
    bottom: -400px;
    -webkit-transition: all 3s;
    -webkit-transform: translate(0, -400px);
    z-index: 999;
}

.tip-header {
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #E8E8E8;
    color: #333;
    background: #67aaf0;
    border-radius: 2px 2px 0 0;
    font-size: 14px;
}

.tip-body {
    padding: 50px 50px;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
}
/* 提示框样式 结束 */
css

 

效果图:

 

标签:jquery,弹框,tip,height,400px,提示框,border,css
From: https://www.cnblogs.com/rdchen/p/17932323.html

相关文章

  • 原生js和jquery判断单选复选框是否选中
    用jquery判断设置单选复选框时,有时会有些迷糊,今天总结下。<dl><dt>单选框</dt><dd><label><inputtype="radio"name="gender"value="男"/>男</label><label><inputtype="radio"name=......
  • Javascript 原型链 jQuery原型链 js原型链 我感觉我能一直写下去 扶着我>_<
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>原型链闭环</title><scriptsrc="./jquery.js"></script></head><body><divclass=&quo......
  • html jquery from 表单提交 application/x-www-form-urlencoded 改成 json
    htmljqueryfrom表单提交$(form).ajaxSubmitapplication/x-www-form-urlencoded改成json<formclass="formform-horizontal"id="form-admin-add"><divclass="rowcl"><labelclass="form-labelcol-xs-4col-......
  • jQuery功能强大的图片查看器插件 viewer
    http://www.htmleaf.com/jQuery/Image-Effects/201509032517.html 如果想知道用户点击的是第几张图片,可使用HTML5的window.postMessage实现通信,修改viewer.js: 然后在html中接收事件: ......
  • python网站创建015:jQuery的标签操作
    当我们找到标签之后,就要学习jQuery对这个标签都能做哪些操作? 1、样式操作:也就是操作标签的css样式添加样式:addClass删除样式:removeClass判断是否有该样式:hasClass有则移除,无则添加:toggleClass<!DOCTYPEhtml><html><head><title>初识:JavaScript</title><meta......
  • UI定制 - 全局提示框
    ■ 全局提示框在开发中,一个全局提示框是很有必要的,毕竟系统的弹框是满足不了产品的变态要求。实现这样一个功能其实很简单代码示例:PopView就是我们要封装的全局弹框//-PopView.h1#import<UIKit/UIKit.h>2typedefvoid(^cancelBlock)(void);3typedefvoid(^sure......
  • python网站创建014:jQuery的引入、选择器和筛选器
    1.下载jQuery之后,那如何使用呢?假如我想操作一个div标签,给这个标签补充文字<!DOCTYPEhtml><html><head><title>初识:JavaScript</title><metacharset="UTF-8"></head><body><!--定义一个无文本的div标签--><div......
  • python网站创建013:jQuery的下载安装
    jQuery:相当于别人做的一个库,模块,里面包含了DOM和BOM所需要的功能,既然有了DOM和BOM那为什么还会有jQuery呢?DOM和BOM是属于比较底层的代码,可以用,但是比较繁琐,所以出现了jQuery,代码更为简洁,之后也建议使用jQuery。jQuery下载:https://jquery.com/ ......
  • jQuery功能强大的图片查看器插件 viewer
    http://www.htmleaf.com/jQuery/Image-Effects/201509032517.html 如果想知道用户点击的是第几张图片,可使用HTML5的window.postMessage实现通信,修改viewer.js: 然后在html中接收事件: ......
  • Qt弹框QDialog、QMessageBox、QColorDialog、QFileDialog、QFontDialog、QProcessDial
    一、概述汇总一下Qt中的弹框:QDialog(自定义)、QMessageBox、QColorDialog、QFileDialog、QFontDialog、QProcessDialog 二、代码示例及演示效果1.自定义弹框(啥都没有的弹框,如果想要自定义内容,直接继承QDialog进行扩展)QDialog*dialog=newQDialog;dialog->setWin......