设为首页 收藏本站
查看: 1365|回复: 0

[经验分享] 每日总结:DIV弹层遮盖、DIV设置透明背景色、JS调用SharePoint 中的SP.UI.ModalDialog弹出遮盖层显示

[复制链接]

尚未签到

发表于 2015-9-26 02:32:29 | 显示全部楼层 |阅读模式
前言:

        这是在上周的工作中的一些小心得,平时用到的地方也很多,希望可以给大家一些启发和帮助。

1、  DIV弹出层遮盖

解析:

这是一个比较常见问题,有很多的网站的注册、或者登录都是用这种弹出遮盖层的方式来解决的。以前也有研究过这个东西,在网上也有各种各样的源码、JS脚本之类的东西,但总是觉得太麻烦,因为本身这个东西就只是一个谈层遮盖而已,我觉得不应该要写那么多的代码,昨天加班忙了一天,也遇到了这个问题,然后就有了一个比较好的解决方法,这里和大家分享一下,希望能对大家有所帮助。

页面布局:




<div>
<ul>
<li>矜持</li>
<li>
<ul>
<li>我从来不曾抗拒你的魅力</li>
<li>虽然你从来不曾对我著迷</li>
<li>我总是微笑的看著你</li>
<li>我的情意总是轻易就洋溢眼底</li>
<li>我曾经想过在寂寞的夜里</li>
<li>你终於在意在我的房间里</li>
</ul>
</li>
</ul>
<a href="#">点击遮盖</a>
</div>
<div id="show">
<ul>
<li>我曾经想过在寂寞的夜里</li>
<li>你终於在意在我的房间里</li>
<li>你闭上眼睛亲吻了我</li>
<li>不说一句紧紧抱我在你怀里</li>
</ul>
<a href="javascript:void(0)">关闭遮盖</a>
</div>
<div class="shadow" id="zhegaiceng">
</div>

  
样式:




<style type="text/css">
.shadow{position:absolute;left:0;top:0;  z-index:10; width:100%; height:100%;filter:alpha(opacity=80); display:none; background:blue; }
#show{ position:absolute; top:10px;left:400px;width:200px; height:400px;display:none; z-index:11; }
</style>

  
说明:

1)       .shadow样式主要用来修饰遮盖的(id为”zhegaiceng”)层,这里需要注意的几个属性是:

position,需要将其设为absolute,为绝对定位,

z-index属性,该值主要用来显示层的显示层次,值越大,越显示在最上边

宽和高:设置为100%,用来将整个屏幕遮盖,

Top/left:设置弹出遮盖层的位置,一般将其设为0,0

Filter:alpha(opacity=80)该属性用来将弹出层的背景色设置为半透明状,即在遮罩的同时还可以看到遮盖层下的内容

display:默认都是none,不显示,当用户进行一些点击操作,比如登录时,才弹出层显示

              示例效果:

               点击之前:   

DSC0000.png                   

               点击之后:

DSC0001.png

2)       #show样式主要用来修饰显示在弹出层之上的内容,这里显示的是一个div,该样式也有几个属性需要设置:

Position:也需将设为绝对定位

z-index:在为该属性设值时,一定要注意值一定要比弹出层样式(.shadow)的z-index值大,只有这样它才能显示出来,且可供用户操作,否则将被遮盖或无法显示

top/left:设置要显示的层的位置,一般都居中设置

display:默认都是none,不显示,当用户进行一些点击操作,比如登录时:才谈层显示

2、Div背景色、透明、渐变

解析:

在上一个问题中,我们在样式了用到了filter属性,以此来实现遮罩透明的效果

这里额外的讲一下filter属性,从字面意思看,就是一个过滤,可以通过alpha提供的一些参数的组合实现div背景色的透明渐变。

filter:alpha(opactiy=10,enabled=true,style=2,finishOpacity=80, startX=20 , startY=20 , finishX=400 , finishY=400 );

           如上的filter示例,我会一一将其代表的含义跟大家讲解清楚:

           Opacity=10;用来表示透明渐变的透明度,取值范围:0-100,值越大,透明度越低,值为100时,完全不透明

           Enabled=true;设置滤镜是否激活,true为激活

           Style=1;指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形

           FinishOpacity=80;用来设置结束时的透明度,达到一种渐变效果,取值范围也是0-100。

StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。

           这里就不再做具体的演示了,希望有兴趣的朋友可以自己在下边练习一下,不过我们平时所用的一般都只是将背景色设为透明即可。

备注:

      使用filter的属性设置背景色时,在IE浏览器下没有任何的问题,但是在360浏览器下,设置的背景色不起作用,会完全的遮盖,希望朋友们知道这些,我在下边做测试的时候,测试了好久都没出现半透明的效果,最后发现是浏览器的问题,希望朋友们可以少走些弯路。

1、  JS调用Sharepoint2010中的SP.UI.ModalDialog弹出遮盖层显示

解析:

在SharePoint里边,几乎所有的新增、编辑操作都是通过弹出层的方式来展现的,这样的展现方式可以带来很好的用户体验,刚好上周的项目中也有用到,对sharepoint,我也是近期才刚刚接触,通过学习和研究,基本上已经很熟练的掌握了使用js调用Sharepoint的ModalDialo弹层显示,这里就和大家一一讲解一下如何使用。

1、  这里有两个页面,一个是调用页DiaoYong.aspx,一个是被调用页BeDiaoYong.aspx

示例场景如下:我们点击调用页的一个按钮,然后弹层被调用页,同时向被调用页传递一个参数,这一场景可以用在比如:列表页点击某一项时,进行编辑

2、  调用页操作:

我们可以为要被点击的按钮设置一个客户端的OnclientClick事件,如下:




<asp:Button ID="btnShowDialog" runat="server" Text="编辑" OnClientClick="retrun OpenClient()" />
<script type="text/javascript">
function OpenClient() {
var options = {
url: ’BeDiaoYong.aspx?ID=116&prime;,
args: null,
title: ‘编辑信息’,
dialogReturnValueCallback: dialogCallback
};
SP.UI.ModalDialog.showModalDialog(options);
}

  
3、  下边主要 options各个参数的意义

url:即要打开页的链接,如果需要像另一个页传递参数可以直接在链接里边加

args:这个参数表示像另一个页面传递一个值,可以通过方式获取在另一个页获取该值

title:被调用页显示的标题

dialogReturnValueCallback:在另一个页关闭时的调用的回调函数,比如,调用另一个页新增了一条数据信息时,可以调用该回调函数,在里边进行设置刷新父页面,就可以马上在List页里显示新增数据

除此之外,option还可以设置一些其他的参数比如:width、height等,可以用来设置弹出层显示页的大小,这里就不在做演示了

4、  在被调用页,即弹出层页,可以使用以下的方式来接受传递过来的参数

1)       如果是在url里通过get的方式传值,则可以Requert[“ID”]的方式获取传递过来的值

2)       如果是通过在options 里为arge参数赋值的方式,则可以使用以下方式获得传递进来的值:

       Var id = window.frameElement.dialogArgs;

但是这样的方式只能在前台获取传递的值

3)       上边有提到回调函数dialogCallback函数,可以通过此函数像调用页传递值

该函数的常用形式如下:




function dialogCallback (dialogResult, returnValue) {
if(dialogResult == SP.UI.DialogResult.ok){
// The user clicked the OK button.      
// handle commitPopup   
} else{
// The user clicked the Cancel button.   
// handle cancelPopup     
}
}

  
例如我们上边提到的如果我们新增或者修改了一条信息,要对列表也进行重新的绑定,边可以在该函数里进行页面的刷新

5、  关闭弹出层页

1)       window.frameElement.cancelPopUp(),调用该方法,将关闭窗口。返回值result是:SP.UI.DialogResult.cancel

2)       window.frameElement.commitPop up(),调用该方法,将关闭窗口。返回值result是: SP.UI.DialogResult.ok

3)       window.frameElement.commonModalDialogClose(),同上,不过返回值是指定的第二个参数returnValue的值

好了,今天的总结就到这里了,这些天都比较忙,继续奋斗吧!Here we go!

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-118802-1-1.html 上篇帖子: MOSS/Sharepoint 开发中代码运行的权限级别的讨论 下篇帖子: Visual Studio 2010 Tools for SharePoint
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表