jquery弹出遮掩层效果【附实例代码】
找了个别人写的遮掩层进行改善，感觉效果还可以。
效果图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tipswindown</title>
<link href="css/tipswindown.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.js" type="text/javascript"></script>
<script src="js/tipswindown.js" type="text/javascript"></script>
<style type="text/css">
#main{width:300px;margin:50px auto;font-family: Arial, Calibri;}
#main .btn {width:150px;height:30px;line-height:30px;font-size:14px; vertical-align:middle; color: #333333; font-weight:bold; text-decoration:none; display:block; text-align:center;background: #CCC;}
#main .btn:hover{vertical-align:middle; color: #fff; font-weight:bold; text-decoration:none;display:block; text-align:center;background: #333;}
</style>
<script type="text/javascript">
$(function () {
$("#DialogShow").click(function () {
tipsWindown("CnBlogs", "id:dialog", "450", "200", "true", "", "true", "id");
});
})
function Ok() {
window.location.href = "http://www.cnblogs.com/";
}
function Cancel() {
$("#windownbg").remove();
$("#windown-box").fadeOut("1000", function () { $(this).remove(); });
}
</script>
</head>
<body>
<div id="main">
<a href="javascript:void(0);" class="btn" id="DialogShow">DialogShow</a>
</div>
<div id="dialog" style="display:none";>
<div class="dialogtext">
<p>Please click on the ok button to go the http://www.cnblogs.com/ website and you should just wait. </p>
<p>If you are accessing this page by mistake please click on the cancel link.</p>
</div>
<div class="dislogbtn">
<a href="javascript:void(0);" class="btn" id="Ok" onclick="Ok()">Ok</a>
<a href="javascript:void(0);" class="btn" id="Cancel" onclick="Cancel()">Cancel</a>
</div>
</div>
</body>
</html>
以上这篇jquery弹出遮掩层效果【附实例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
jquery弹出遮掩层效果【附实例代码】
找了个别人写的遮掩层进行改善,感觉效果还可以. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &
-
jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&
-
jQuery中ztree 点击文本框弹出下拉框的实例代码
废话不多说了,具体代码如下所示: <link rel="stylesheet" href="${ctx}/res/js/ztree/css/demo.css" type="text/css"/> <link rel="stylesheet" href="${ctx}/res/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/cs
-
jQuery弹出div层过2秒自动消失
下面给大家分享一段代码关于jquery弹出div层并自动消失的实现代码,废话不多说了,具体代码如下所示: var HuiFang={ m_tishi :null,//全局变量 判断是否存在div, //提示div 等待2秒自动关闭 Funtishi: function (content, url) { if (HuiFang.m_tishi == null) { HuiFang.m_tishi = '<div class="xiaoxikuang none" id="a
-
Android 自定义弹出菜单和对话框功能实例代码
Android 开发当中,可能会存在许多自定义布局的需求,比如自定义弹出菜单(popupWindow),以及自定义对话框(Dialog). 话不多说,直接上图片. 先讲第一种,自定义PopUpWindow 1.popupWindow protected void showPopWindow(View view, final int pos){ WindowManager wm= (WindowManager) myContext.getSystemService(Context.WINDOW_S
-
jQuery弹出窗口打开链接的实现代码
下面给大家分享一段jquery代码实现弹出窗口打开链接的实现方法 window.open(url, name, style, replace); //弹出窗口打开链接,参数:网址,命名,窗体样式,是否替代原窗口 用处:打开新窗体,打开自定义页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在弹出窗口中打开新连接</title> </h
-
Android 中从屏幕左下角弹出Dialog动画效果的实现代码
MainActivity代码: import android.app.Dialog; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.Window; import androi
-
JS实现单击输入框弹出选择框效果完整实例
本文实例讲述了JS实现单击输入框弹出选择框效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
-
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失. 比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TEST</title
-
jQuery + html + css 实现王者荣耀官网首页效果 附实例代码
访问地址 reset.css /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, cod