jQuery和CSS3制作Popup弹出窗

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Popup弹出窗,时常有碰到,以前都只是写Popup的样式,从没有涉及jQuery怎么实现。今天看到一个教程有关于这方面的制作,认真学习了一下。事后仔细一想,用jQuery来制作还是可以看懂的,现将代码稍加整理放上站上,以备今后可以使用,因为记性不好,所以这个懒就偷不了。别的不说,和我一样不懂的,就一起动手试试吧:

一、HTML Markup

			<a href="javascript:popup('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.')">Popup!</a>
			<div id="dialog-overlay"></div>
			<div id="dialog-box">
			    <div class="dialog-content">
			        <div id="dialog-message"></div>
			        <a href="#" class="button">Close</a>
			    </div>
			</div>
		

这里的HTML其实很简单,“a href="javascript:popup()"”是指加载的弹出窗口的显示内容,在没有弹出时将在“body”中显示“popup!”,而“div#dialog-overlay”是一个灰色的全屏蒙板,“div#dialog-box”就是弹出窗口了,其内容主要包含了“div#dialog-message”惮出窗口要显示的内容,另一个是“a.button”关闭button,具体如下图所示:

二、CSS Code

这里使用了部分CSS3属性写“popup”相在元素的标签,代码中加了相关注解,大家可以根据自己的需求进行修改:

				#dialog-overlay {
				/* set it to fill the whil screen */
				width:100%;
				height:100%;
				/* transparency for different browsers */
				filter:alpha(opacity=50);
				-moz-opacity:0.5;
				-khtml-opacity: 0.5;
				opacity: 0.5;
				background:#000;
				/* make sure it appear behind the dialog box but above everything else */
				position:absolute;
				top:0; 
				left:0;
				z-index:3000;
				/* hide it by default */
				display:none;
				}
				#dialog-box {
				/* css3 drop shadow */
				-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
				-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
				box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
				/* css3 border radius */
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				border-radius: 5px;
				background:#eee;
				/* styling of the dialog box, i have a fixed dimension for this demo */
				width:328px;
				/* make sure it has the highest z-index */
				position:absolute;
				z-index:5000;
				/* hide it by default */
				display:none;
				}
				#dialog-box .dialog-content {
				/* style the content */
				text-align:left;
				padding:10px;
				margin:13px;
				color:#666;
				font-family:arial;
				font-size:11px;
				}
				a.button {
				/* styles for button */
				margin:10px auto 0 auto;
				text-align:center;
				background-color: #e33100;
				display: block;
				width:50px;
				padding: 5px 10px 6px;
				color: #fff;
				text-decoration: none;
				font-weight: bold;
				line-height: 1;
				/* css3 implementation :) */
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
				text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
				border-bottom: 1px solid rgba(0,0,0,0.25);
				position: relative;
				cursor: pointer;
				}
				a.button:hover {
				background-color: #c33100;
				}
				/* extra styling */
				#dialog-box .dialog-content p {
				font-weight:700; margin:0;
				}
				#dialog-box .dialog-content ul {
				margin:10px 0 10px 20px;
				padding:0;
				height:50px;
				}
		

三、jQuery Cody

下面使用jQuery代码来实现“popup”弹出窗的效果:

			<script type="text/javascript" src="../jquery.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function () {

				    // if user clicked on button, the overlay layer or the dialogbox, close the dialog 
				    $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {    
				        $('#dialog-overlay, #dialog-box').hide();      
				        return false;
				    });

				    // if user resize the window, call the same function again
				    // to make sure the overlay fills the screen and dialogbox aligned to center   
				    $(window).resize(function () {

				        //only do it if the dialog box is not hidden
				        if (!$('#dialog-box').is(':hidden')) popup();      
				    });


				});

				//Popup dialog
				function popup(message) {

				    // get the screen height and width 
				    var maskHeight = $(document).height(); 
				    var maskWidth = $(window).width();

				    // calculate the values for center alignment
				    var dialogHeight =  $('#dialog-box').outerHeight(); 
				    var dialogWidth = $('#dialog-box').outerWidth();

				    // assign values to the overlay and dialog box
				    $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
				    $('#dialog-box').css({
							top: "50%",
							left:"50%",
							"margin-left": -(dialogWidth/2),
							"margin-top": -(dialogHeight/2)
							}).show();

				    // display the message
				    $('#dialog-message').html(message);

				}
			</script>
		

最终效果如下所示:

如需转载烦请注明出处:W3CPLUS

Air Max 90 Ultra Moire

如需转载,烦请注明出处:https://www.w3cplus.com/blog/196.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部