jQuery代碼實現(xiàn)對話框右上角菜單帶關(guān)閉×
更新時間：2016年05月03日 10:04:20 作者：roucheng
這篇文章主要介紹了jQuery代碼實現(xiàn)對話框右上角菜單帶關(guān)閉× 的相關(guān)資料,需要的朋友可以參考下
先給大家展示下效果圖，具體效果圖如下所示，如果大家覺得還不錯，請參考實現(xiàn)代碼：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery對話框右上角帶關(guān)閉× - 何問起</title><base target="_blank" />
<!-- Attach our CSS -->
<link rel="stylesheet" >
<!-- Attach necessary scripts -->
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/layer/1/jquery.reveal.js"></script>
<style type="text/css">
body {
font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif;
}
.big-link {
display: block;
margin-top: 50px;
text-align: center;
font-size: 30px;
background-color:#eeeeee;
color: #06f;
}
.hovertreeinfo{text-align:center;} .hovertreeinfo a{color:darkcyan;}
</style>
</head>
<body>
<div class="hovertreeinfo">
<h1>jQuery彈出可關(guān)閉層提示框</h1>
</div>
<a class="big-link" data-reveal-id="myModal">
Demo 1
</a>
<a class="big-link" data-reveal-id="myModal" data-animation="fade">
Demo 2
</a>
<a class="big-link" data-reveal-id="myModal" data-animation="none">
Demo 3
</a>
<div id="myModal" class="reveal-modal">
<h1>jquery導(dǎo)出層</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.
推薦使用Demo 1，和Demo 3兩種方式。何問起 hovertree.com
</p>
<a class="close-reveal-modal">×</a>
</div>
<div class="hovertreeinfo">推薦使用Demo 1，和Demo 3兩種方式.
<br />
<a >原文</a> <a >首頁</a>
<a >特效</a>
<br />by 何問起
hovertree.com
<br />
<!--<img src="http://hovertree.com/texiao/layer/1/modal-gloss.png" />-->
</div>
</body>
</html>
以上所述是小編給大家介紹的jQuery代碼實現(xiàn)對話框右上角菜單帶關(guān)閉×的相關(guān)內(nèi)容，希望對大家有所幫助！
您可能感興趣的文章:
- 基于jQuery實現(xiàn)帶動畫效果超炫酷的彈出對話框(附源碼下載)
- jQuery實現(xiàn)時尚漂亮的彈出式對話框?qū)嵗?/a>
- jquery插件hiAlert實現(xiàn)網(wǎng)頁對話框美化
- JQuery彈出炫麗對話框的同時讓背景變灰色
- jQuery實現(xiàn)單擊按鈕遮罩彈出對話框(仿天貓的刪除對話框)
- Jquery EasyUI中彈出確認對話框以及加載效果示例代碼
- jquery刪除提示框彈出是否刪除對話框
- jQuery Mobile的loading對話框顯示/隱藏方法分享
- JQuery制作的放大效果的popup對話框(未添加任何jquery plugin)分享
- Jquery實現(xiàn)頁面加載時彈出對話框代碼
- 6款經(jīng)典實用的jQuery小插件及源碼(對話框/提示工具等等)
- jQuery Dialog對話框事件用法實例分析
- jquery實現(xiàn)點擊彈出可放大居中及關(guān)閉的對話框(附demo源碼下載)
相關(guān)文章
用戶邊輸入計算同時進行，告訴用戶還剩余多少可輸入的字數(shù),當超過規(guī)定的字數(shù)后，點擊確定，會讓輸入框閃動2012-06-06
這篇文章主要介紹了jQuery多文件異步上傳帶進度條實例代碼,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
下面小編就為大家分享一篇zTree樹形菜單的使用實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了jQuery中:only-child選擇器用法,實例分析了:only-child選擇器的功能、定義及匹配父元素的唯一子元素使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
jquery 在使用ajax過程中出現(xiàn)調(diào)用失敗的情況，想必大家都有遇到過吧，在本文有個不錯的示例，希望對大家有所幫助2013-09-09
jquery form表單提交插件asp.net后臺中文解碼
對于jquery form表單提交插件jquery.form.js，在提交表單數(shù)據(jù)時，如果表單數(shù)據(jù)有中文，則被提交的數(shù)據(jù)是要經(jīng)過編碼的。2010-06-06
jQuery實現(xiàn)頁碼跳轉(zhuǎn)式動態(tài)數(shù)據(jù)分頁
本片文章教給大家用jQuery實現(xiàn)頁碼跳轉(zhuǎn)式動態(tài)數(shù)據(jù)分頁，效果非常好而且沒有頁面刷新，需要的朋友學(xué)習(xí)下吧。2017-12-12
jquery實現(xiàn)文本框鼠標右擊無效以及不能輸入的代碼
jquery實現(xiàn)文本框鼠標右擊無效以及不能輸入的實現(xiàn)方法，需要的朋友可以參考下。2010-11-11
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)彈出層效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
在項目中遇到的需求，效果是仿淘寶的。寫出來和他家分享下，很簡單的東西。^_^2011-04-04