位置:首頁 > JS特效代碼 > 提示框和彈出層
jQuery模態彈出框模態插件

<!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/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/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/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/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/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/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>
<!-- oktemplate_detail_right -->
<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>
<!--
* @Author: your name
* @Date: 2022-01-28 12:16:04
* @LastEditTime: 2022-01-29 17:51:45
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \new1jquery\core\templates\default\common\footer.html
-->
<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 src="js/nav.js"></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>