Demo : Kích vào đây

Demo ảnh



Cách làm :

HTML :

Code:

<a id="howdy" href="#">Kích vào đây</a><div id="overlay" style="display: none;"></div><div id="modal" style="width: auto; height: auto; top: 54px; left: 647px; display: none;">
  <div id="content"></div>
  <a id="close" href="#">close</a></div>

Scripts :

Code:

<script>
         var modal = (function(){
            var
            method = {},
            $overlay,
            $modal,
            $content,
            $close;

            // Center the modal in the viewport
            method.center = function () {
               var top, left;

               top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
               left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

               $modal.css({
                  top:top + $(window).scrollTop(),
                  left:left + $(window).scrollLeft()
               });
            };

            // Open the modal
            method.open = function (settings) {
               $content.empty().append(settings.content);

               $modal.css({
                  width: settings.width || 'auto',
                  height: settings.height || 'auto'
               });

               method.center();
               $(window).bind('resize.modal', method.center);
               $modal.show();
               $overlay.show();
            };

            // Close the modal
            method.close = function () {
               $modal.Bài viết không bị Ẩn();
               $overlay.Bài viết không bị Ẩn();
               $content.empty();
               $(window).unbind('resize.modal');
            };

            // Generate the HTML and add it to the document
            $overlay = $('<div id="overlay"></div>');
            $modal = $('<div id="modal"></div>');
            $content = $('<div id="content"></div>');
            $close = $('<a id="close" href="#">close</a>');

            $modal.Bài viết không bị Ẩn();
            $overlay.Bài viết không bị Ẩn();
            $modal.append($content, $close);

            $(document).ready(function(){
               $('body').append($overlay, $modal);                  
            });

            $close.click(function(e){
               e.preventDefault();
               method.close();
            });

            return method;
         }());

         // Wait until the DOM has loaded before querying the document
         $(document).ready(function(){

            $.get('ajax.html', function(data){
               modal.open({content: data});
            });

            $('a#howdy').click(function(e){
               modal.open({content: "Chào mừng bạn đến với Cntt-k3.com"});
               e.preventDefault();
            });
         });
      </script>

( nếu đặt trong forum thì đã có sẵn thư viện Jquery , còn nếu đặt trong HTML bạn nên thêm thư viện jquery này

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

CSS :

Code:

* {
            margin:0;
            padding:0;
         }

         #overlay {
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:#000;
            opacity:0.5;
            filter:alpha(opacity=50);
         }

         #modal {
            position:absolute;
            background:url(http://www.jacklmoore.com/demo/modal/tint20.png) 0 0 repeat;
            background:rgba(0,0,0,0.2);
            border-radius:14px;
            padding:8px;
         }

         #content {
            border-radius:8px;
            background:#fff;
            padding:20px;
         }

         #close {
            position:absolute;
            background:url(http://www.jacklmoore.com/demo/modal/close.png) 0 0 no-repeat;
            width:24px;
            height:27px;
            display:block;
            text-indent:-9999px;
            top:-7px;
            right:-7px;
         }

bài viết rất hay ....