jQuery和CSS3制作Popup弹出窗

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

返回顶部