html5如何实现d出提示框,并且伴随遮罩层并且可以关闭d出框

html5如何实现d出提示框,并且伴随遮罩层并且可以关闭d出框,第1张

通过jquery的show()和hide()函数联合使用,实现d出窗口。

一、show()和hide()函数解析:

1、show() 方法显示隐藏的被选元素

注意:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。

2、hide() 方法隐藏被选元素。

这与 CSS 属性 display:none 类似,但是隐藏的元素不会被完全显示(不再影响页面的布局)。

二、设计一个HTML页面,包括一个简单的d出窗,和一个显示按钮。其中,调用了jquery的以上两个函数。具体代码如下:

三、设计遮罩层的样式,如下:

四、d出窗口的css样式,代码如下:

五、初始页面如下:

六、点击按钮,查看d出窗口结果:

七、关闭d出窗后,打开开发者中心,如下:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQueryd出侧边栏滑动菜单 - 何问起</title><base target="_blank" />

<link rel="stylesheet" href="hto/html5/19/css/reset.css">

<link rel="stylesheet" href="htcom/texiao/html5/19/css/style.css">

<script language="javascript" src="om/ziyuan/jquery/jquery-2.2.0.min.js"></script>

<script language="javascript" src="js/main.js"></script>

<!--[if IE]>

<script src="hte.com/texiao/html5/4/html5shiv.min.js"></script>>

<![endif]-->

</head>

<body>

<main>

<header>

<h1>jQueryd出侧边栏滑动菜单 <span>A Full-Screen Pushing Navigation</span></h1>

<p>A full page menu, that replaces the current content by pushing it off the screen.</p>

<p><a href="htt.com/">首页</a><a href="hm/texiao/">特效</a><a href="httm/h/bjaf/manpingmenu.htm">原文</a>

</p>

</header>

</main>

<a href="#cd-nav">

Menu

<span></span>

<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">

<circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>

</svg>

</a>

<div id="cd-nav">

<div>

<div>

<h2>导航菜单</h2>

<nav>

<ul>

</ul>

</nav>

</div>

<div>

<address>

<ul>

<li><a href="mailto:hovertree@hovertree.com">hovertree@hovertree.com</a></li>

<li>021-00000000</li>

<li>

<span>何问起</span>

<span>hovertree.com</span>

<span>keleyi菜单</span>

</li>

</ul>

</address>

</div>

</div>

</div>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6295348.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-20
下一篇 2023-03-20

发表评论

登录后才能评论

评论列表(0条)

保存