- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a >
- #dialog-overlay {
- width:100%;
- height:100%;
- filter:alpha(opacity=50);
- -moz-opacity:0.5;
- -khtml-opacity: 0.5;
- opacity: 0.5;
- position:absolute;
- background:#000;
- top:0; left:0;
- z-index:3000;
- display:none;
- }
- #dialog-box {
- -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
- -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- background:#eee;
- width:328px;
- position:absolute;
- z-index:5000;
- display:none;
- }
- #dialog-box .dialog-content {
- text-align:left;
- padding:10px;
- margin:13px;
- color:#666;
- font-family:arial;
- font-size:11px;
- }
- a.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;
- -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;
- }
- #dialog-box .dialog-content p {
- font-weight:700; margin:0;
- }
- #dialog-box .dialog-content ul {
- margin:10px 0 10px 20px;
- padding:0;
- height:50px;
- }
- </style>
- <script type="text/javascript">
- $(document).ready(function () {
- $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {
- $('#dialog-overlay, #dialog-box').hide();
- return false;
- });
- $(window).resize(function () {
- if (!$('#dialog-box').is(':hidden')) popup();
- });
- });
- //Popup dialog
- function popup(message) {
- var maskHeight = $(document).height();
- var maskWidth = $(window).width();
- var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
- var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
- $('#dialog-overlay').CSS({height:maskHeight, width:maskWidth}).show();
- $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
- $('#dialog-message').html(message);
- }
- </script>
- </head>
- <body onload="popup('<p>You can pass html code to it as well:</p><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li></ul>')">
- <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>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/150520133362.html
来源: http://www.codesnippet.cn/detail/150520133362.html