介绍一个jQuery弹出的模态窗口

这是我在网上下载的一个案例，由于公司的项目要用到，我对他进行了改版。

虽然是一个别人写的案例，但是我公司没有人能对它修改成需要的样式，我既然研究出来了，就在这里分享下我的心得！

这里我把我理解的内容给大家解释下，希望用的时候可以方便的。

 

这段代码的结构是一个ul无序列表：

<ul>
        <li>
            <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>

</ul>

然后在头部的jQuery代码中进行调用：

$(function() {
        $('#gallery a').lightBox();
    });

 

这个效果的代码全部在一个外部的js文件中。而模态窗口的css样式又全部在一个外部文件中，这样很方面修改。

 

首先研究外部的js文件：

 

可以看到，整个模态窗口的结构都是用jQuery动态生成的，在这段代码里：

$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');

这个结构显然不好研究，可以把它复制出来，粘到一个新建的html文件中，这样方便观察结构。

其中，

<div id="jquery-lightbox">

这个div的宽度是通屏的，

 <div id="lightbox-container-image-box">

<div id="lightbox-container-image-data-box">

这两个div通过margin：0 auto属性设置成屏幕的居中显示。

弄懂了这些结构，再加上外部的css样式，基本上就可以对它进行改版了。

 

但是我做的这个案例改动比较大，由上下布局改为左右布局，两个左右切换的箭头要由图片上面变成整个区域的左右两边。

鉴于是左右的布局，我把可以自动使用大小的布局改成了固定的布局，

var intCurrentWidth = $('#lightbox-container-image-box').width();
   var intCurrentHeight = $('#lightbox-container-image-box').height();
   var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); 
   var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); 

   var intDiffW = intCurrentWidth - intWidth;
   var intDiffH = intCurrentHeight - intHeight;

 这些是获取高度和宽度的变量，改成相应的数字就可以了。

至于两个左右的箭头，我不得不在多加了个div给固定位置：

$('body').append('')

加额外的表情必须在这里面添加才可能生效。

 

 

理解了上述这些东西，基本上这个效果你就可以任意的改动了，最好是css样式好一点的人比较好改！

 

 

下面的两个压缩包，上面的是原来效果的。下面的是根据我公司的需求，修改过效果的。