jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉×
先給大家展示下效果圖,具體效果圖如下所示,如果大家覺得還不錯(cuò),請(qǐng)參考實(shí)現(xiàn)代碼:

代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery對(duì)話框右上角帶關(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 >首頁(yè)</a>
<a >特效</a>
<br />by 何問起
hovertree.com
<br />
<!--<img src="http://hovertree.com/texiao/layer/1/modal-gloss.png" />-->
</div>
</body>
</html>
以上所述是小編給大家介紹的jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉×的相關(guān)內(nèi)容,希望對(duì)大家有所幫助!
- 基于jQuery實(shí)現(xiàn)帶動(dòng)畫效果超炫酷的彈出對(duì)話框(附源碼下載)
- jQuery實(shí)現(xiàn)時(shí)尚漂亮的彈出式對(duì)話框?qū)嵗?/a>
- jquery插件hiAlert實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)話框美化
- JQuery彈出炫麗對(duì)話框的同時(shí)讓背景變灰色
- jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話框(仿天貓的刪除對(duì)話框)
- Jquery EasyUI中彈出確認(rèn)對(duì)話框以及加載效果示例代碼
- jquery刪除提示框彈出是否刪除對(duì)話框
- jQuery Mobile的loading對(duì)話框顯示/隱藏方法分享
- JQuery制作的放大效果的popup對(duì)話框(未添加任何jquery plugin)分享
- Jquery實(shí)現(xiàn)頁(yè)面加載時(shí)彈出對(duì)話框代碼
- 6款經(jīng)典實(shí)用的jQuery小插件及源碼(對(duì)話框/提示工具等等)
- jQuery Dialog對(duì)話框事件用法實(shí)例分析
- jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對(duì)話框(附demo源碼下載)
相關(guān)文章
調(diào)用HttpHanlder的幾種返回方式小結(jié)
本篇文章主要是對(duì)調(diào)用HttpHanlder的幾種返回方式進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12
基于JQuery實(shí)現(xiàn)CheckBox全選全不選
做項(xiàng)目時(shí)需要實(shí)現(xiàn)CheckBox的全選,我想用JQuery實(shí)現(xiàn),從網(wǎng)上找了找,網(wǎng)上的確有很多例子,但都不能實(shí)現(xiàn)我想要的全部效果2011-06-06
jQuery實(shí)現(xiàn)新消息在網(wǎng)頁(yè)標(biāo)題閃爍提示
這篇文章主要介紹了jQuery實(shí)現(xiàn)新消息在網(wǎng)頁(yè)標(biāo)題閃爍提示的相關(guān)資料,需要的朋友可以參考下2015-06-06
jquery網(wǎng)頁(yè)回到頂部效果(圖標(biāo)漸隱,自寫)
當(dāng)網(wǎng)頁(yè)內(nèi)容草雞多的時(shí)候,用戶就需要有個(gè)按鈕快速回到頂部,于是用js來實(shí)現(xiàn)下,畫布多說,直接上代碼2014-06-06
詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹
這篇文章主要介紹了詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹 ,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01
JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
這篇文章主要是對(duì)JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置的示例代碼進(jìn)行了介紹。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12

