Axure RP使用攻略--带遮罩层的弹出框(9)

实现目标:

1、   点击按钮弹出带遮罩层的对话框;

2、   页面上下左右滚动时,弹出的对话框水平和垂直始终居中。

实现步骤如下:

1、 拖入编辑区2个矩形,并点右键—转换—转换为动态面板;

2、 双击其中一个动态面板设置标签为“遮罩层”(看个人喜好随便命名),并双击状态1进入编辑;

3、 点击状态1里面的矩形,设置大小与网站页面大小相同,以便完全遮盖;然后,设置矩形边框为“无”;最后设置填充色的透明度为50%(看个人喜好),并选择填充色为灰色(看个人喜好);

4、 关闭状态1编辑页面,选择另外一个动态面板,按照第2步命名并进入编辑;

5、 设置里面的矩形为合适大小,并拖入一个按钮(或者矩形/文本面板)作为关闭按钮;设置按钮onclick事件为隐藏遮罩层和当前编辑的这个动态面板;

6、 关闭当前的编辑页面,再次选择作为对话框的这个面板—右键—编辑选项—固定到浏览器…;

7、勾选固定到浏览器窗口,水平和垂直都选择居中,并勾选“保持在前面”;

8、 拖入一个按钮(或者矩形/文本面板)到编辑区,双击输入文字“登录”;然后点右键—顺序—置于底层;设置按钮onclick事件为显示遮罩层和对话框这两个动态面板;

9、 按着ctrl选择两个动态面板(或者挨个设置),点右键—编辑选项—设为隐藏。

10、 好了,生成原型就能看到效果了。

扩展:固定到浏览器选项可以让动态面板无论页面怎么滚动,总是停留在一个位置,那么网站两侧的对联广告,或者浮在页面上的一些按钮、图片等,都能用这种方式来实现。

时间: 2024-08-25 19:33:01

Axure RP使用攻略--带遮罩层的弹出框(9)的相关文章

显示遮罩层和弹出框

因为最近用到了遮罩层和弹出框,上网查资料后自己完成了一个,在此做一下记录做保存. 因为用到了jq,所以需要引入jq文件,比如jquery-1.11.3.js 以下是jsp的代码: <body> <div> <input id="button" type="button" value="点击我"> <div class="shareDialog"> <div class=&q

JavaScript 遮罩层与弹出层

*Element.style.width(height)只能获取HTML中的宽和高(无法获取CSS中的样式),并且宽和高为带'px'的字符串 *Element.offsetHeight(offsetWidth)需要在该元素插入HTML中之后(新创建的元素)才能获取到 遮罩层与弹出层(登录框)使用fixed定位,遮罩层使用设备分辨率的宽高 function openNew(){ //获取设备分辨率的高度和宽度 var sWidth=window.screen.width; var sHeight=

ASP.NET—013:实现带控件的弹出层(弹出框)

在页面中用到弹出新页面的情况比较多的,一般来说都是使用JS方法showModalDialog("新页面相对路径+?参数1&参数2",window,"新页面样式");然后会新弹出一个模态的page页.而在有些时候,仅仅是显示一些单一的.少量的数据,或者一些简单的操作时.就没必要使用新弹出页面了.此时,最好使用弹出层,也就是数据还是显示在当前页面的某个控件上,然后通过JS方法实现达到弹出的目的.看下面的例子: <html xmlns="http:

Js弹出层,弹出框代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

Axure RP使用攻略--入门级(六)

关于Axure rp触发事件中IF和ELSE IF的使用说明 IF=如果 ELSE IF=否则,如果 举例: 事件"天气变化时" 用例1:IF True 下雨 执行 带伞 用例2:ELSE IF 下冰雹 执行戴钢盔 用例3:ELSE IF True 执行 什么都不带 什么意思呢?在Axure里,默认一个事件中的每个用例都是有关联的,是由上至下来执行的,上面的示例用白话来说就是: 当天气变化时,如果(IF)是(True)下雨,就带伞,否则(ELSE)如果(IF)是下冰雹,是的话戴钢盔,否

Axure RP使用攻略--入门级(二)

Axure rp的线框图元件 l  图片 图片元件拖入编辑区后,可以通过双击选择本地磁盘中的图片,将图片载入到编辑区,axure会自动提示将大图片进行优化,以避免原型文件过大:选择图片时可以选择图片原始大小,或保持图片元件的大小. l  文本 在网页中文本的名称是lable,用于页面中添加说明文字.文字连接,或一些动态的提示. l  矩形 矩形的应用比较广泛,比如作为页面的背景.按钮.以及一些元件的遮盖等:矩形的形状可以通过鼠标右键点击–编辑选项-改变形状,来变成我们需要的形状,比如做选项卡时候

Axure RP使用攻略--动态面板的用途(8)

写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于动态面板 动态面板是axure原型制作中使用非常频繁的一个元件,主要用途就是实现一些动态的交互效果.所以,如果动态面板使用不熟悉的话,对axure原型的制作会有很大的影响,那么动态面板都能做什么呢?主要有以下几个方面: 1.  隐藏与显示 2.  滑动效果 3.  拖动效果 4.  多状态效果 以上这些效果都在移动面板的元件属性里

Axure RP使用攻略--入门级(三)

Axure rp元件的触发事件 l  OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发.比如点击按钮. l  OnMouseEnter(鼠标移入时): 鼠标进入到某个元件范围时触发,比如当鼠标移到某张图片时显示该图片的介绍. l  OnMouseOut(鼠标移出时): 鼠标离开某个元件范围时触发.比如鼠标离开图片时,图片介绍消失. l  OnKeyUp(按键弹起时): 文本框(单行与多行)编辑时,键盘按下某一个按键松开时触发,不支持其他axure元件.比如统计文

JS与CSS实现遮罩层及弹出层效果

其实就是事先在网页里加入两个div框,控制显隐实现的功能. 以下为实现代码(非本人原创,网上找的,我对CSS不感冒): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht