首页 > 其他分享 >jQuery和CSS3超酷3D翻转式模态对话框插件

jQuery和CSS3超酷3D翻转式模态对话框插件

时间:2024-12-02 10:43:36浏览次数:6  
标签:__ jquery 插件 dialog 对话框 awesomodals 超酷

jquery-awesomodals是一款JQUERY和CSS3超酷3D翻转式模态对话框插件。该对话框特效通过jquery和CSS3 transitions和transforms来在对话框打开时制作3D翻转的效果,效果非常的酷。

在线演示  下载

 

安装

可以通过bower来安装jquery-awesomodals插件。

$ bower install jquery-awesomodals                  
                

 使用方法

使用jquery-awesomodals插件需要在页面中引入jquery和jquery-awesomodals.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="dist/jquery-awesomodals.min.js"></script>                  
                
 HTML结构

该对话框的HTML结构如下:

<div class="dialogs">
  <div class="dialog" id="modal-demo">
    <div class="dialog__content">
      <header class="dialog__header">
        <h1 class="dialog__title">Welcome</h1>
      </header>
      <div class="dialog__body">
        ......
      </div>
      <footer class="dialog__footer">
        <button class="btn" data-modal-close>Close</button>
      </footer>
    </div>
  </div>
  <div class="dialog-overlay"></div>
</div>
                

然后可以通过一个按钮来触发对话框。

<button class="btn" data-modal="#modal-demo" data-modal-init>打开对话框</button>                  
                
 CSS样式

对话框的基本CSS样式如下:

.dialog {
  max-width: 480px;
  position: fixed;
  left: 50%;
  top: 2em;
  transform: translateX(-50%);
  z-index: 2000;
  visibility: hidden;
  backface-visibility: hidden;
  perspective: 1300px;
}

.dialog--active { visibility: visible; }

.dialog--active .dialog__content {
  opacity: 1;
  transform: rotateY(0)
}

.dialog--active ~ .dialog-overlay {
  opacity: 1;
  visibility: visible
}

.dialog__content {
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: .5s ease-in-out;
  opacity: 0;
  transform-style: preserve-3d;
  transform: rotateY(-70deg)
}

.dialog__header {
  background: #cb4a70;
  color: #fff
}

.dialog__title {
  margin: 0;
  text-align: center;
  font-weight: 200;
  line-height: 2em
}

.dialog__body { padding: 2em }

.dialog__footer {
  margin: 0 2em;
  padding: 2em 0;
  text-align: right;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.dialog__footer .btn { font-size: 1.5em }

.dialog-overlay {
  content: "";
  position: fixed;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(0,0,0,0.5);
  transition: all .6s
}               
                
 初始化插件

在页面DOM元素加载完毕之后,可以通过awesomodals()方法来初始化该对话框插件。

$('.container').awesomodals();                  
                

 配置参数

参数 默认值 可选值 描述
debug false 布尔值 是否允许显示调试信息
selectorOpen '[data-modal-init]' data-*属性 , class类或任何元素选择器  
selectorClose '[data-modal-cose]' data-*属性 , class类或任何元素选择器  
selectorModal '[data-modal-item]' data-*属性 , class类或任何元素选择器  
itemOverlay '.dialog-overlay' 任何元素选择器  
classActive 'dialog--active' 字符串 激活对话框的class类
optionOverlayActive true 布尔值 是否允许点击遮罩层关闭对话框
onModalOpened null 回调函数 对话框被打开时触发
onModalClosed null 回调函数 对话框被关闭时触发

标签:__,jquery,插件,dialog,对话框,awesomodals,超酷
From: https://www.cnblogs.com/mybook000/p/18581212

相关文章

  • idea 插件分享
    插件总览功能名称推荐度绿色背景主题LoveYourEyesTheme五星中文语言包Chinese​(Simplified)​LanguagePack三星Java诊断工具arthas-idea-plugin五星es控制台工具ElasticsearchQuery-EDQL五星添加类与方法的注释EasyJavadoc四星美化等......
  • VSCode:代码格式化插件
    settings.json文件中添加如下配置并保存 {"workbench.sideBar.location":"left","cssrem.rootFontSize":80,"git.ignoreWindowsGit27Warning":true,"eslint.codeAction.showDocumentation":{"ena......
  • 基于Bootstrap的Material Design风格表单插件
    JqueryMaterialFormPlugin是一款基于Bootstrap的MaterialDesign风格的JQUERY表单插件。该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效。在线演示  下载  使用方法使用该MaterialDesign风格表单需要在页面中引入jquery,bo......
  • 如果让你把把html页面导出为pdf,不用插件的话,你该怎么做?
    如果不用插件,在前端将HTML页面导出为PDF,主要有以下几种方法:利用浏览器自带的打印功能转换为PDF:这是最简单的方法。大多数现代浏览器都支持将页面打印成PDF。可以通过JavaScript调用window.print()来触发打印对话框,然后用户可以选择将输出目标设置为PDF。优点......
  • 写一个让一句话随着鼠标移动的小插件
    //创建一个div元素来容纳文本constfloatingText=document.createElement('div');floatingText.style.position='fixed';//使其相对于视口定位floatingText.style.pointerEvents='none';//避免干扰鼠标事件floatingText.textContent='这是一句会跟随鼠标移动的......
  • AI编程助手(插件)
    1前言基于AI大模型,在vscode等编程工具中使用一些插件能提供代码智能生成与补全、代码与思路问答、代码优化、代码解释等功能这一篇主要以阿里的通义灵码为例进行说明2通义灵码在vscode中辅助编程1文档及安装项目文档:https://help.aliyun.com/zh/lingma/product-overview/i......
  • 【Unity 水面着色器插件】Stylized Water Toon Shader - Mobile Ready 专为低性能平台
    StylizedWaterToonShader-MobileReady是一款为Unity开发者设计的水面着色器插件,专为低性能平台(如移动设备)优化,提供高质量的卡通风格水面效果。该插件通过简化的渲染方式和丰富的视觉效果,使开发者能够在移动端或其他性能受限的平台上实现流畅的水面表现,适用于多种游戏......
  • 【Unity 特效插件】Trails FX 帮助开发者在游戏中实现物体移动时产生的尾迹效果
    TrailsFX是一款专为Unity开发者设计的特效插件,用于创建动态的尾迹效果(TrailEffects)。这款插件提供了一种快速而高效的方式,帮助开发者在游戏中实现物体移动时产生的尾迹效果,如快速移动的物体、飞行物、粒子效果等。无论是用于角色技能、武器攻击、物体轨迹,还是火焰、光影......
  • 【Unity 战斗插件】ABC Integration: Game Creator 2
    ABCIntegration:GameCreator2是一个为GameCreator2框架开发的插件,旨在将ABC(Action-BasedCombat)系统与GameCreator2集成。ABC是一个专注于动作战斗的系统,它可以轻松地让开发者为自己的游戏添加复杂的战斗机制、攻击动作和技能系统。通过该插件,开发者能够快......
  • SD WebUI必备插件安装,菜鸟轻松成高手!
    一个刚学AI绘画的小菜鸟怎么快速成为StableDiffusionde的高手?答案就是SD插件,只要学会使用SD的各种插件,帮你写正向和负向提示词,修复人脸/身体/手指,高清放大图片,指定人物pose,图片微调等等都可以轻松搞定,善用插件是成为高手必经之路。目录1插件安装方法2基础插件介绍3......