Jquery-simplemodal的使用,弹出窗口,弹出页面

原文:http://www.cnblogs.com/ike_li/articles/1538363.html

 

在原文基础上进行一些修改,可以直接打开一个独立的html页面作为弹出,不用写在原页面用display:none来隐藏

 

css(想实现鼠标移动上去出现变化,结果没有效果,不知道哪里出错了)

/* Overlay */

#simplemodal-overlay 

{

    background-color:#000;

    cursor:wait;

}



/* Container */

#simplemodal-container 

{

    background-color:#fff;

    border:3px solid #614f1a;

}

#simplemodal-container a.modalCloseImg  {

	background:url(../images/Close.png) no-repeat; /* adjust url as required */

	width:30px;

	height:30px;

	display:inline;

	z-index:3200;

	position:absolute;

	right:-15px;

	top:-15px;

	cursor:pointer;

}



#simplemodal-container a.modalCloseImg :hover {

	background:url(../images/Close2.png) no-repeat; /* adjust url as required */

	width:30px;

	height:30px;

	display:inline;

	z-index:3200;

	position:absolute;

	right:-15px;

	top:-15px;

	cursor:pointer;

}

 

 

js:

//Code by SSS

//src : 弹出页面url

//width: 宽度

//height: 高度

//showfun: 打开页面时调用

//closefun: 关闭页面时的回调

function OpenMyModal(src, width, height, showfun, closefun) {

    var frame = '<iframe width="' + width + '" height="' + height + '"src="' + src + '" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>';

    var option = {

        escClose: true,

        close: true,

        minHeight: height,

        minWidth: width,

        autoResize: true

    };

    if (showfun != null) {

        option.onShow = showfun();

    }

    if (closefun != null) {

        option.onClose = function () { $.modal.close(); closefun(); }

    }



    $.modal(frame, option);

}

 

 

html

//引用jquery-1.3.2.min.js

//调用:

<script type="text/javascript" language="javascript">



      OpenMyModal("http://www.cnblogs.com/Home/MiniLogon", 450, 320, null,null);

        

       function Show() {

            alert('show is ok');

       }



        function Close() {

            alert('close is ok');

        }        

</script>

其他:

API

现在来看下其API

appendTo ：将弹出框添加到的父容器，参数为css选择器

opacity ：透明度

overlayId ：遮罩层id

overlayCss ：{Object}定义遮罩层样式

containerId ：弹出窗体容器id

containerCss ：定义容器的样式

dataId ：内容层id

containerCss ：内容层的样式

minHeight ：最小高度

minWidth ：最小宽度

maxHeight ：最大高度

maxWidth ：最大宽度

autoResize：是否自适应大小

zIndex ：弹出层的z-index

close ：是否允许关闭

closeHTML ：自定义关闭按钮

closeClass ：关闭层样式

overlayClose ：点击遮罩层是否关闭弹出窗体

position ：数组 [top, left] 自定义弹出窗体位置

onOpen ：弹出窗体打开时候的回调函数

onShow ：弹出窗体显示时候的回调函数

onClose ：弹出窗体关闭时候的回调函数

最后 $.modal.close(); 关闭弹出窗体