顯示1秒就消失的彈窗

阿新 • • 發佈：2019-01-11

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src='jquery-1.11.3.min.js'></script>
		<style>
.i_class-alert {
				width: 30px;
				height: 30px;
				display: inline-block;
				margin-top: -5px;
				background: url(http://hbkj-pc-web-img.oss-cn-beijing.aliyuncs.com/pru_bb_icon.png) -6px -7px no-repeat;
				vertical-align: middle;
			}
			
			.dp-model-alert {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9999;
				display: none;
			}
			
			.content-alert {
				width: 450px;
				height: 150px;
				background: #fff;
				position: fixed;
				top: 50%;
				left: 45%;
				margin-left: -75px;
				margin-top: -320px;
				border: 5px solid #ccc;
			}
			
			.content-top-alert {
				height: 30px;
				background: #f8f8f8;
				padding: 0 7px;
			}
			
			.left-alert {
				line-height: 30px;
				float: left;
			}
			
			.right-close-alert {
				float: right;
				line-height: 30px;
				cursor: pointer;
			}
			
			.content-bottom-alert {
				height: 120px;
				position: relative;
			}
			
			.content-bottom-c-alert {
				width: 270px;
				height: 40px;
				position: absolute;
				top: 30%;
				left: 5%;
			}
			
			.i-alert {
				width: 30px;
				height: 30px;
				display: inline-block;
				margin-top: -5px;
				background: url(http://hbkj-pc-web-img.oss-cn-beijing.aliyuncs.com/pru_bb_icon.png) -6px -7px no-repeat;
				vertical-align: middle;
			}
			
			.span-alert {
				line-height: 40px;
				margin-left: 10px;
				font-size: 16px;
			}
			
			.content-btn-alert {
				width: 125px;
				height: 40px;
				background: red;
				position: absolute;
				top: 30%;
				right: 5%;
				color: #fff;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
			}
			
			.a-alert {
				text-decoration: none;
				color: #fff;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<button class='collect-btn'>點選收藏</button>
		<div class='dp-model-alert'>
		<div class='content-alert'>
			<div class='content-top-alert'>
				<span class='left-alert span-alert'>溫馨提示</span> <span
					class='right-close-alert span-alert'>✖</span>
			</div>
			<div class='content-bottom-alert'>
				<div class='content-bottom-c-alert'>
					<i class="i-alert"></i> <span
						class='text-content1-alert span-alert'>收藏成功 </span>
				</div>
				<a class="a-alert" href="/myhb/myCollection/000/produce">
					<div class='content-btn-alert'>檢視收藏></div>
				</a>
			</div>
		</div>
	</div>
	</body>
	<script>
		$(function() {
			$('.collect-btn').click(function() {
				$('.dp-model-alert').show().delay(1000).hide(200);//1000 表示展示1秒後消失
			})
			$('.right-close-alert').click(function() {
				$('.dp-model-alert').hide()
			})
		})
	</script>

</html>

顯示1秒就消失的彈窗

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script sr

學會這2招，1秒就能生成Word簡歷模板

　在工作中，時常需要新增一些固定的內容，若每次手動輸入肯定很麻煩，那複製貼上嗎？其實也麻煩，因為你要儲存下來再使用。那有沒有更加便捷的方式呢？答案是肯定的。本期與大家分享如何在秒鐘內生成簡歷的技巧。　　注意：想要生成簡歷，重要前提是你已經制作word模板。　　1、自動更

java顯示1秒前，1分鐘前，2分鐘前，3天前

/** * 顯示時間，如果與當前時間差別小於一天，則自動用**秒(分，小時)前，如果大於一天則用format規定的格式顯示 * * @author wxy * @param ctim

彈出框顯示2秒後，自動消失

jQuery(document).ready(function($) { $('.theme-login').click(function(){ $('.theme-popover-mask').fadeIn(100);

easyUI dialog 彈窗居中顯示

重新默認對話 add window win div easyu 屏幕默認情況下應該是在屏幕居中顯示的。但是有的時候沒有居中只要重新糾正下就可以了 $(‘#add_dialog‘).dialog(‘open‘); //打開添加對話框 $(‘#add_dialog

fancybox圖片彈窗顯示插件跳到頁面頂部問題

-i img blog upload 自動跳轉 ont strong 顯示圖片 log 最近發現一個使用fancybox插件顯示圖片時頁面自動跳轉至頂部的問題。問題原因：一開始html高度為100%;；當點擊圖片是調用fancybox插件顯示圖片的時候會給html添

定時消失的Alert彈窗

elb true nim with forms selector select 類方法 -- 在公共類裏面寫如下兩個類方法就可以了，只需要把第一個類方法公布出來：代碼如下： #pragma mark --- 定時彈窗 --- + (void)showAlertViewW

百度地圖彈窗效果，標註總顯示在左上角

scroll coder 自動 poi level edr local board 放大縮小現象一：地圖彈窗先隱藏 ->顯示地圖彈窗->設置marker -> 設置centerAndZoom 　　看效果標註層定點位置有問題（因顯隱），中心點還是相對

TERSUS畫畫一樣開發軟件顯示元件介紹-子頁面及彈窗顯示元件

軟件開發；管理軟件；無代碼軟件開發TERSUS無代碼手機電腦管理類軟件開發，其中窗口類顯示元件包括：子頁面元件（Page Dialog）、彈窗顯示元件（Modal Dialog）子頁面元件（Page Dialog）：是手機和平板移動端設計時所用到的新頁面元件，移動端是由各個頁面所組成的，在按鈕等元件中放置一

Springboot下載功能，附件超過8K不能顯示下載彈窗，頁面亂碼問題

strong oid map str 亂碼 ica req 大小出現 Springboot項目中遇到一個文件下載問題，當文件大小超過8K時，不會出現彈出窗，而是直接在頁面顯示亂碼。有問題的源碼如下： @RequestMapping(value = "/exportFi

微信小程式：wx.navigateBack()時彈窗一直顯示

前言小程式使用服務需要使用者繫結手機號，在進入頁面時，判斷使用者是否授權，未授權的話，彈窗元件(自定義的)顯示 onShow(){ let isBind = xxx if(!isBind){ // 獲取彈窗元件(自定義的)例項 this.bindTip = this

使用easyUI的彈窗時，總是顯示第一次彈出一的內容的解決辦法

絕對原創，轉載時，請註明。先寫結論：在彈窗之前重新整理彈窗就可以了。具體步驟如下：第一步：寫一個主頁面：main.html <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w

wepy元件控制彈窗淡入淡出，父元件控制內容與顯示事件

描述父元件載入子元件父元件傳值給子元件（顯示內容，顯示時長）重複點選同一事件或者不同事件單個顯示時長不變（清理定時器）類似彈窗都可轉換程式碼 father.wpy //父元件 <template> <chil

點選彈窗提示，3秒後關閉視窗並跳轉新的頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

在Excel表格中隱藏手機號碼中間4位數字，1秒處理方法就這5種！

像×××號、手機號、地址一類的內容，都是十分重要的隱私資訊，所以對於這些重要資訊為了不讓人知曉，一般都會採用隱藏部分欄位的方法，但具體該如何隱藏？今天小編就為大家詳細介紹一下，在Excel中隱藏欄位的方法！（以12位數字為例）一、REPLACE函式步驟：輸入公式【=REPLACE(A1,4,5

HTML 自定義彈窗自動消失

html中有一些彈出窗，如alert，confirm等。但是有些我們特定的需求不好實現，比如彈出窗彈出後3s後消失，所以要用到自己定義的彈出窗。如下：參考借鑑：https://zhidao.baidu.com/question/589365277.html <!DOCTYPE html&g

把資料通過串列埠或USB以1秒間隔實時發給另外一臺計算機，在另外一臺計算機上以同樣方式顯示條形圖或趨勢曲線。

前面兩篇文章已經講過了隨機資料產生，繪製直方圖，趨勢圖，資料儲存，串列埠傳送。接下來則是串列埠接收部分的程式。注意：如果在一臺電腦上進行除錯，需要用虛擬串列埠軟體把串列埠1，2連結起來。 // 作業Dlg.cpp : 實現檔案 // #includ

SuperMap建立標註，點選標註彈窗顯示資訊

var markers=new SuperMap.Layer.Markers("Markers",{}); var marker; function processData(data) { //呼叫了processData函式 ma

強大美觀的通用彈窗XPopup，一個就足夠！

XPopup 功能強大，UI簡潔，互動優雅的通用彈窗！可以替代Dialog，PopupWindow，PopupMenu，BottomSheet等元件，自帶十幾種效果良好的動畫，支援完全的UI和動畫自定義！編寫本庫的初衷有以下幾點：專案有這樣常見需

Excel無法完全顯示超過11位數的數字？超簡單方法1秒教給你！

在Excel表格中輸入超過11位數的數字時，會自動變為科學計數格式，無法全部顯示所有數字，但當我們需要在單元格中顯示超過11位數的數字，如何快速處理？最全最快的方法教給大家。一、單引號在輸入長數字之前，先輸入英文狀態下的單引號再輸入數字，單元格格式會自動轉換至文字

顯示1秒就消失的彈窗

相關推薦