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

最新推荐文章于 2022-01-13 16:02:52 发布

weixin_33815613

最新推荐文章于 2022-01-13 16:02:52 发布

阅读量102

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/JangoJing/archive/2010/11/25/1888258.html

版权

原文: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 ：最小高度