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(); 关闭弹出窗体