這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉× 的相關(guān)資料,需要的朋友可以參考下
先給大家展示下效果圖，具體效果圖如下所示，如果大家覺(jué)得還不錯(cuò)，請(qǐng)參考實(shí)現(xiàn)代碼：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery對(duì)話框右上角帶關(guān)閉× - 何問(wè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>
<h1>jQuery彈出可關(guān)閉層提示框</h1>
</div>
<a data-reveal-id="myModal">
Demo 1
</a>
<a data-reveal-id="myModal" data-animation="fade">
Demo 2
</a>
<a data-reveal-id="myModal" data-animation="none">
Demo 3
</a>
<div id="myModal">
<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兩種方式。何問(wèn)起 hovertree.com
</p>
<a>×</a>
</div>
<div>推薦使用Demo 1，和Demo 3兩種方式.
<br />
<a >原文</a> <a >首頁(yè)</a>
<a >特效</a>
<br />by 何問(wèn)起
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ì)大家有所幫助！