怎么样实现Avada主题Modal弹窗效果

Avada主题的Modal弹窗效果在用户体验上面有很好的效果，今天就来讲下怎么样实现Avada主题Modal弹窗效果

前言：Modal这个element必须跟Button或tagline box结合使用才可以，因为如果modal是一辆车的话，button就是车钥匙，车必须有钥匙才可以启动。另外，弹窗也叫Popup

第一种是点击button实现弹窗效果

1. 在Avada的页面中添加并设置button

你可以在avada网站中page，post或portfolio这几种页面后台，点击+element，然后点击Button

button url 留空

Button’s Text 填上文字

Modal window anchor  填上小写英文单词，如inquiry， 不要填contact form这种带空格的句子或短语

填好之后保存。

2. 添加Modal并设置

还是在页面中点击+element，然后搜索modal，就可以快速找到modal这个功能，再点击Modal

然后设置

Name of modal   填上跟上面button的Modal window anchor一模一样的小写字母单词

size of modal     选择弹窗的大小

content of modal 填的是你的弹窗内容，像表单代码，图片，视频等，只要把相应的内容放进去，保存即可

其他的框都可以留空

询盘表单弹窗效果如下：

视频的弹窗效果如下：

第二种是点击文字或图片实现弹窗效果

1.在element里面选择modal text link这一个，并插入到页面中

2.在name of modal中输入inquiry，不要填contact form这种带空格的句子或短语，并在text or html code中输入文字，如果想做成图片弹窗就输入图片的html代码<img src=”#” /> ，并在#处填上图片的链接

3. 插入modal这个element，并填好name of modal并填入弹窗的内容，保存刷新即可实现文字或图片的弹窗效果

Name of modal   填上跟上面一模一样的小写字母单词

size of modal     选择弹窗的大小

content of modal 填的是你的弹窗内容，像表单，图片，视频等，只要把相应的内容放进去，保存即可