提示框和彈出層

jQuery模態彈出框模態插件

1970-01-01 106瀏覽數

<！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Transitional // EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <頭> ??վ????ǽ</ title> </ head> <樣式> p { line-height：20px; } ul {list-style-type：none;} li {list-style-type：none;} </ style> <body style =“ padding：0; margin：0; font：14px / 1.5 Microsoft Yahei，????，sans-serif; color：＃555;”> <div style =“ margin：0 auto; width：1000px; padding-top：70px;溢出：隱藏;”> <div style =“ width：300px; float：left; height：200px; background：url（http://404.safedog.cn/images/safedogsite/broswer_logo.jpg）不重複100px 60px;”> </ div > <div style =“ width：600px; float：left;”> <div style =“ height：40px; line-height：40px; color：#fff; font-size：16px;溢出：隱藏； background：＃6bb3f6; padding-left：20px;”> ??վ???? ǽ</ div> <div style =“ border：1px虛線#cdcece; border-top：none; font-size：14px; background：#fff; color：＃555; line-height：24px; height：220px; padding：20px 20px 0 20px ;溢價y：auto;背景：＃f3f7f9;“> <p style =“ margin-top：0px; margin-bottom：0px; margin-left：0px; margin-right：0px; -qt-block-indent：0; text-indent：0px;”> <span style = “ font-weight：600; color：＃fc4f03;”> ???????????в??Ϸ?????????ѱ???վ????Ա??? ????أ？</ span> </ p> <p style =“ margin-top：0px; margin-bottom：0px; margin-left：0px; margin-right：0px; -qt-block-indent：0; text-indent：0px;”> ???？ ԭ?????????ύ?????ݰ???Σ？յĹ?????????? </ p> <p style =“ margin-top：12px; margin-bottom：12px; margin-left：0px; margin-right：0px; -qt-block-indent：1; text-indent：0px;”> ???ν ????? </ p> <ul style =“ margin-top：0px; margin-bottom：0px; margin-left：0px; margin-right：0px; -qt-list-indent：1;”> <li style =“ margin-top：12px ; margin-bottom：0px; margin-left：0px; margin-right：0px; -qt-block-indent：0; text-indent：0px;“> 1 ???????ύ???ݣ？ </ li> <li style =“ margin-top：0px; margin-bottom：0px; margin-left：0px; margin-right：0px; -qt-block-indent：0; text-indent：0px;”> 2 ??? ???վ？йܣ????? ϵ？ռ??ṩ？̣？</ li> <li style =“ margin-top：0px; margin-bottom：0px; margin-left：0px; margin-right：0px; -qt-block-indent：0; text-indent：0px;”> 3 ??? ？ͨ???վ？ÿͣ?????? ϵ ???վ???Ա???? </ li> </ ul> </ div> </ div> </ div> <div style =“ width：900px; height：600px; margin：0 auto;”> <iframe allowtransparency =“ true” src =“ http://404.safedog.cn/sitedog_stat.html” frameborder =“ no” border =“ 0” style =“ width：900px; height：600px;” > </ iframe> </ div> </ body> </ html> </div> <div class="downbox"> <a target="_blank" class="btn btn-big btn-green" href="/zh-tw/show-7925.html">在線預覽</a> <a target="_blank" class="btn btn-big btn-blue ml10" href="//file.oktemplate.com/download.php?filename=%2Fitem%2F8390%2Fpreview">免費下載</a> </div> </div> <div class="otherlink"> <h2>妳也可能喜歡</h2> <ul> <li><b><a href="/zh-tw/3172_js-mobile-phone-pop-up-digital-soft-keyboard.html" target="_blank">JS手機彈出式數字軟鍵盤</a></b> <p><i><a href="/zh-tw/3172_js-mobile-phone-pop-up-digital-soft-keyboard.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTkvMy8zMTEwMDk0NTEucG5n.png"></i>JS手機上彈出數字軟鍵盤的特殊效果代碼，這是用於病歷生命體徵的通用數字鍵盤代碼。</a></p> </li> <li><b><a href="/zh-tw/7768_jquery-unlimited-pop-up-window-plug-in-can-be-dragged.html" target="_blank">jQuery可以拖動無限彈出窗口插件</a></b> <p><i><a href="/zh-tw/7768_jquery-unlimited-pop-up-window-plug-in-can-be-dragged.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMjAvNi8xNDEwNDgwMjUucG5n.png"></i>jQuery可以拖動無限彈出窗口插件</a></p> </li> <li><b><a href="/zh-tw/274_css3-svg-creative-bubble-tooltip-style.html" target="_blank">css3 + svg創意提示框工具提示樣式</a></b> <p><i><a href="/zh-tw/274_css3-svg-creative-bubble-tooltip-style.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTkvMTAvMjQwNDA2MzUxLnBuZw%3D%3D.png"></i>css3 + svg創意語音氣泡樣式特殊效果代碼，css3 + svg創意氣泡工具提示樣式</a></p> </li> <li><b><a href="/zh-tw/3180_16-kinds-of-css3-animation-pop-up-mask-layer.html" target="_blank">16種CSS 3動畫彈出蒙版層</a></b> <p><i><a href="/zh-tw/3180_16-kinds-of-css3-animation-pop-up-mask-layer.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTgvOC8yMjAyMzUxNDEucG5n.png"></i>彈出層動畫效果有很多種，窗口蒙版效果非常漂亮，動畫使用了css3實現的各種效果。</a></p> </li> <li><b><a href="/zh-tw/3027_jquery-prompt-message-bubble-plugin.html" target="_blank">jQuery提示消息氣泡插件</a></b> <p><i><a href="/zh-tw/3027_jquery-prompt-message-bubble-plugin.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTgvOS8xMjEwNDM1MDIuanBn.jpg"></i>一個漂亮的圓形氣泡樣式jQuery工具提示插件，可使用grumble.js插件將其旋轉360度。氣泡樣式通過背景圖像實現。</a></p> </li> <li><b><a href="/zh-tw/3192_jquery-classic-light-box-pop-up-layer-plugin.html" target="_blank">jQuery經典燈箱彈出層插件</a></b> <p><i><a href="/zh-tw/3192_jquery-classic-light-box-pop-up-layer-plugin.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTgvNS8yNzA4NDcxMTUuanBn.jpg"></i>Fancybox是一個基於jquery開發的類似Lightbox的插件。它支持為放大的圖片添加陰影效果，並為一組相關圖片添加導航按鈕。 Fancybox是一個漂亮的jquery彈出顯示插件。除了顯示圖片之外，燈箱還可以顯示經校正的內容並通過CSS自定義外觀。</a></p> </li> <li><b><a href="/zh-tw/3184_mobile-app-style-jquery-loading-prompt-layer-plugin.html" target="_blank">移動應用風格的jQuery加載提示層插件</a></b> <p><i><a href="/zh-tw/3184_mobile-app-style-jquery-loading-prompt-layer-plugin.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTgvNy8xNjExMTM1NTEuanBn.jpg"></i>jQuery實現了IOS樣式提示層，通知層和加載層效果以及默認的黑色樣式。</a></p> </li> <li><b><a href="/zh-tw/3177_jquery-prompt-message-box-plugin-with-sound-effects.html" target="_blank">帶有聲音效果的jQuery提示消息框插件</a></b> <p><i><a href="/zh-tw/3177_jquery-prompt-message-box-plugin-with-sound-effects.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTgvOC8yODAzMjExNjIuanBn.jpg"></i>通過使用jquery.notify.js消息插件構造的簡單實用的jQuery消息提醒。消息提醒插件的特點是，在顯示提示框時可以發出聲音。它簡單實用，並且用戶體驗非常好。</a></p> </li> <li><b><a href="/zh-tw/3183_jquery-hot-plug-in-product-partial-description.html" target="_blank">jQuery熱插件產品局部描述</a></b> <p><i><a href="/zh-tw/3183_jquery-hot-plug-in-product-partial-description.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTgvNy8xOTAyMTkzMjcucG5n.png"></i>addDot是一個熱點插件，使用jQuery構造可以添加一個或多個熱點信息，並且=在產品圖像上顯示簡短描述圖像的特定部分。</a></p> </li> <li><b><a href="/zh-tw/3016_bootstrap-message-dialog-plugin.html" target="_blank">引導消息對話框插件</a></b> <p><i><a href="/zh-tw/3016_bootstrap-message-dialog-plugin.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTkvNy8yMjExMTg1OTYucG5n.png"></i>引導消息對話框插件是由jQuery + bootstrap.js封裝的消息對話框插件。</a></p> </li> <div class="clear"></div> </ul> </div> </div> <div class="sidebar"> <div class="search"> <form action="/default/index/slist" method="get" name="searchform" id="searchform"> <input name="keyword" class="input_text" placeholder="請輸入關鍵字,搜索免費的網站模板" type="text"> <input name="Submit" class="input_submit" value="search" type="submit"> </form> </div>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="8537103365" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="cloud"> <h2 class="hometitle">熱門標簽</h2> <ul> <a href="/zh-tw/default/index/slist?keyword=%E5%BC%95%E5%B0%8E%E6%A8%A1%E6%9D%BF">引導模板</a> <a href="/zh-tw/default/index/slist?keyword=%E5%8F%8D%E6%87%89%E9%9D%88%E6%95%8F">反應靈敏</a> <a href="/zh-tw/default/index/slist?keyword=%E5%BC%95%E5%B0%8E%E7%A8%8B%E5%BA%8F4">引導程序4</a> <a href="/zh-tw/default/index/slist?keyword=%E5%BC%95%E5%B0%8E%E7%A8%8B%E5%BA%8F">引導程序</a> <a href="/zh-tw/default/index/slist?keyword=css3">css3</a> <a href="/zh-tw/default/index/slist?keyword=%E5%B8%86%E5%B8%83">帆布</a> <a href="/zh-tw/default/index/slist?keyword=%E5%85%AC%E5%8F%B8%E7%B6%B2%E7%AB%99">公司網站</a> <a href="/zh-tw/default/index/slist?keyword=%E5%85%AC%E5%8F%B8%E7%B6%B2%E7%AB%99">公司網站</a> <a href="/zh-tw/default/index/slist?keyword=html5%E6%A8%A1%E6%9D%BF">html5模板</a> <a href="/zh-tw/default/index/slist?keyword=%E8%83%8C%E6%99%AF%E6%A8%A1%E6%9D%BF">背景模板</a> <a href="/zh-tw/default/index/slist?keyword=%E5%BC%95%E5%B0%8E%E6%8F%92%E4%BB%B6">引導插件</a> <a href="/zh-tw/default/index/slist?keyword=jQuery%E6%8F%92%E4%BB%B6">jQuery插件</a> <a href="/zh-tw/default/index/slist?keyword=%E9%9B%BB%E5%AD%90%E5%95%86%E5%8B%99%E6%A8%A1%E6%9D%BF">電子商務模板</a> <a href="/zh-tw/default/index/slist?keyword=%E7%AE%A1%E7%90%86%E6%A8%A1%E6%9D%BF">管理模板</a> <a href="/zh-tw/default/index/slist?keyword=html%E6%A8%A1%E6%9D%BF">html模板</a> <a href="/zh-tw/default/index/slist?keyword=CSS3%E5%8B%95%E7%95%AB">CSS3動畫</a> <a href="/zh-tw/default/index/slist?keyword=%E8%B3%BC%E7%89%A9%E4%B8%AD%E5%BF%83%E6%A8%A1%E6%9D%BF">購物中心模板</a> <a href="/zh-tw/default/index/slist?keyword=%E5%9C%96%E7%89%87%E9%96%8B%E9%97%9C">圖片開關</a> <a href="/zh-tw/default/index/slist?keyword=%E5%9F%83%E6%9F%A5%E7%89%B9">埃查特</a> <a href="/zh-tw/default/index/slist?keyword=%E4%BC%81%E6%A5%AD%E6%A8%A1%E6%9D%BF">企業模板</a> </ul> </div> <div class="paihang"> <h2 class="hometitle">熱門下載</h2> <ul> <li><b><a href="/zh-tw/4257_bootstrap-login-registration-form-switch-page.html" target="_blank">Bootstrap登錄註冊表格切換頁面</a></b> <p><i><a href="/zh-tw/4257_bootstrap-login-registration-form-switch-page.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTkvNy8wNTA0MzMxNTMucG5n.png"></i>簡單而通用的登錄和註冊表單彈出窗口切換，這是基於html5 css3引導程序創建的響應式登錄註冊頁面模板</a></p> </li> <li><b><a href="/zh-tw/7863_courier-company-logistics-freight-html-template.html" target="_blank">快遞公司物流貨運HTML模板</a></b> <p><i><a href="/zh-tw/7863_courier-company-logistics-freight-html-template.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2ltZ3MuYm9vdHN0cmFwbWIuY29tLzIwMjAvNi8yODEwMzkyNzkuanBn.jpg"></i>Excelsure是快遞公司和物流貨運服務的HTML模板。該模板專門用於快遞和物流公司的網站。像素完美的設計，輕巧，易於移動。這是一個乾淨，現代且簡單的模板。主要功能現代設計和簡潔3基於Bootstrap構建的首頁4像素完美設計易於自定義設計跨瀏覽器兼容的格式和註釋代碼LineAwesome和Flaticon圖標字體jQuery效果和腳本</a></p> </li> <li><b><a href="/zh-tw/455_html5-halo-line-webpage-background-animation-special-effects.html" target="_blank">HTML5暈線網頁背景動畫特效</a></b> <p><i><a href="/zh-tw/455_html5-halo-line-webpage-background-animation-special-effects.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMjAvNS8wNzA4NTAyMDEucG5n.png"></i>HTML5暈線網頁背景動畫效果，基於Canvas，適用於動態網頁背景。</a></p> </li> <li><b><a href="/zh-tw/7849_free-html-template.html" target="_blank">lc_switch.js切換按鈕插件示例</a></b> <p><i><a href="/zh-tw/7849_free-html-template.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2ltZ3MuYm9vdHN0cmFwbWIuY29tLzIwMjAvNi8yODExMzIxNzMucG5n.png"></i>lc_switch.js切換按鈕插件示例，切換效果選擇按鈕。</a></p> </li> <li><b><a href="/zh-tw/1218_exquisite-chat-system-and-task-management-html-template.html" target="_blank">精美的聊天系統和任務管理HTML模板</a></b> <p><i><a href="/zh-tw/1218_exquisite-chat-system-and-task-management-html-template.html" target="_blank"><img src="//img.oktemplate.com/aHR0cDovL2kuYm9vdHN0cmFwbWIuY29tLzIwMTkvMTEvMjcxMDEzMzg4LnBuZw%3D%3D.png"></i>Chatriq是一個精美的聊天系統和任務管理HTML模板。它是基於Bootstrap框架創建的聊天室系統的前端模板，可以快速創建具有完全響應的現代元素和最新設計的聊天應用程序。主要功能：明暗版本響應式設計Bootstrap 4.3.1 perfect-scrollbar滾動條</a></p> </li> </ul> </div> </div> <div class="clear"></div> </article>  <footer class="footer"> <div class="footer-box"> <div class="footer-menu"><div class="warp"> <div class="footer-div"> <h3>模板服務</h3> <ul> <li><a href="/zh-tw/page/1">最新模板</a></li> <li><a href="/zh-tw/template/template_corporate-website">企業網站模板</a></li> <li><a href="/zh-tw/template/template_personal-website-blog">個人博客模板</a></li> <li><a href="/zh-tw/template/template_backstage-management">後臺管理模板</a></li> <li><a href="/zh-tw/template/template_e-commerce-mall">商城模板</a></li> <li><a href="/zh-tw/template/free-jquery-plugin-example">js特效代碼</a></li> </ul> </div> <div class="footer-div"> <h3>模板服務</h3> <ul> <li><a title="關於我們" href="/zh-tw/about_us.html" target="_blank">關於我們</a></li> <li><a title="聯系我們" href="/zh-tw/contact_us.html" target="_blank">聯系我們</a></li> <li><a title="版權說明" href="/zh-tw/copyright.html" target="_blank">版權說明</a></li> </ul> </div> <div class="footer-div"> <h3>網站地圖</h3> <ul> <li><a title="網站地圖" href="/zh-tw/sitemap.html" target="_blank">網站地圖</a></li> </ul> </div> <div class="footer-text"> <p>OK模板(www.okTemplate.com)為您提供大量免費網頁模板素材,jQuery插件,jQuery模板,JS特效代碼模板,商務網站模板,網站模板下載,Div+CSS模板,wordpress模板,網頁設計模板,網站後臺管理模板,dedecms免費模板,個人博客模板,全站模板程序等上千個免費網頁模板下載。</p> </div> </div></div> <div class="copyright"> <div> Copyright © 2020-2021 okTemplate.com All Rights Reserved</div> <div> </div> </div> </div> </footer> <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279651835'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/stat.php%3Fid%3D1279651835' type='text/javascript'%3E%3C/script%3E"));</script> <script type="text/javascript"> //jQuery.noConflict(); jQuery(function() { var elm = jQuery('#left_flow2'); var startPos = jQuery(elm).offset().top; jQuery.event.add(window, "scroll", function() { var p = jQuery(window).scrollTop(); jQuery(elm).css('position',((p) > startPos) ? 'fixed' : ''); jQuery(elm).css('top',((p) > startPos) ? '0' : ''); }); }); </script> </body> </html>