本主题增加得弹窗特效记录

2021-8-16 / 0 评论 / 251 阅读
<div class="btns">
<div onClick="syalert.syopen('alert1')">确认弹窗</div>
<div onClick="syalert.syopen('alert2')">消息弹窗</div>
<div onClick="syalert.syopen('alert3')">消息提示</div>
<div onClick="syalert.syopen('alert4')">模态弹窗</div>
</div>

<!-- 确认弹窗 -->
<div class="sy-alert animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert1">
  <div class="sy-title">温馨提示</div>
  <div class="sy-content">你喜欢此插件吗?</div>
  <div class="sy-btn">
    <button onClick="syalert.syhide('alert1')">取消</button>
    <button onClick="ok('alert1')">确定</button>
  </div>
</div>
<!-- 消息弹窗 -->
<div class="sy-alert sy-alert-alert animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="alert" sy-mask="true" id="alert2">
  <div class="sy-title">温馨提示</div>
  <div class="sy-content">提交成功,谢谢!</div>
  <div class="sy-btn">
    <button onClick="ok('alert2')">确定</button>
  </div>
</div>
<!-- 提示弹窗 -->
<div class="sy-alert sy-alert-tips animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="tips" sy-mask="false" id="alert3"> 
  <div class="sy-content">请输入姓名</div>
</div>
<!-- 自定义弹窗 -->
<div class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert4">
  <div class="sy-title">用户注册</div>
  <div class="sy-content">
    <div class="form">
    <p class="input-item"><input type="text" placeholder="请输入手机号" /></p>
    <p class="input-item"><input type="text" placeholder="请输入验证码" /><button class="getcode">获取验证码</button></p>
    <p class="input-item"><input type="text" placeholder="请输入邮箱" /></p>
    <p class="input-item"><input type="text" placeholder="请输入地址" /></p>
    <p class="input-item"><input type="text" placeholder="请输入QQ" /></p>
    <p class="input-item"><input type="text" placeholder="请输入传真" /></p>
    </div>
  </div> 
  <div class="sy-btn">
    <button onClick="syalert.syhide('alert4')">取消</button>
    <button onClick="ok('alert4')">确定</button>
  </div> 
</div>
<script>
function ok(id){
    syalert.syhide(id); 
}
</script>

取消