先給大家展示下效果圖，具體效果圖如下所示，如果大家覺(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 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兩種方式。何問(wèn)起 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 何問(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ì)大家有所幫助！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
