移动端的多种效果弹窗对话框插件

移动端的多种效果弹窗对话框插件

移动端的多种效果弹窗对话框插件

一款移动端的多种效果弹窗对话框插件,一共有10种效果可供选择,每种效果都可以自由设置不同的显示内容,比较适合移动端需要弹窗的页面使用,喜欢的童鞋请收下吧。

源码介绍

页面的head部分,需引入页面的样式文件、jQuery库和弹窗插件,代码如下:

 type="text/css" rel="stylesheet" href="css/global.css"/> 
 type="text/javascript" src="js/jquery.min.js"> 
 type="text/javascript" src="js/windowOpen.js" >

               

页面的body部分,先设置好每一种弹窗特效的触发按钮,代码如下:

 class="open-window">游客不能登录 
 class="open-window-simulate">模拟账号为开户 
 class="open-window-title">网络异常下单失败 
 class="open-window-2btn">模拟账户输入交易密码 
 class="open-window-please-top-up">资金不足请充值 
 class="open-window-close-out-fail">平仓失败 
 class="open-window-set-orders">修改挂单提示 
 class="open-window-set-orders-fail">修改挂单失败提示 
 class="open-window-set-indent-fail">修改订单失败 
 class="open-window-loading">页面加载中...

               

接着设置好各种弹窗特效的触发和相关参数,代码如下:

 type="text/javascript"> 
//游客不能登录提示框,执行此代码 
var setTitle = ''
var setContents = ''
var setButton = ''
$('.open-window').on('click',function(){ 
    setTitle = '提示'
    setContents = '您好,游客不能交易,请“开立真实账户”或“开立模拟账户”'
    setButton = '["取消","确定"]'
    $(this).openWindow(setTitle,setContents,setButton); 
}); 
//网络异常下单失败提示,执行此代码 
$('.open-window-title').on('click',function(){ 
    setTitle = '提示'
    setContents = '网络异常下单失败,请稍后再试'
    setButton = '["确定"]'
    $(this).openWindow(setTitle,setContents,setButton); 
}); 
//模拟账户输入交易密码,或者开立真实账户提示,执行此代码 
$('.open-window-2btn').on('click',function(){ 
    setTitle = '提示'
    setContents = '为了确保您的模拟账户的资金安全请输入您的交易密码'
    setButton = '["真实账户","确定"]'
    $(this).openWindow(setTitle,setContents,setButton); 
}); 
//模拟账号未开户提示,执行此代码 
$('.open-window-simulate').on('click',function(){ 
    setContents = '模拟账号未开户,请点击一键开户'
    setButton = '["取消","一键开户"]'
    $(this).openWindow(setTitle,setContents,setButton); 
}); 
//资金不足请充值,执行此代码 
$('.open-window-please-top-up').on('click',function(){ 
    //设置按钮个数和链接 
    setContents = '资金不足,请及时充值'
    setButton = '["取消","删除"]'
    $(this).openWindow(setTitle,setContents,setButton); 
}); 
//网络异常平仓失败,请稍后再试,执行此代码 
$('.open-window-close-out-fail').on('click',function(){ 
    setTitle = '提示'
    setContents = '网络异常平仓失败,请稍后再试'
    setButton = '["确认"]'
    $(this).openWindow(setTitle,setContents,setButton); 
}); 
//修改挂单提示执行此代码 
$('.open-window-set-orders').on('click',function(){ 
    setTitle = '提示'
    setContents = '订单:#5725799 GOLD,buy limit at 1187.00'
    setButton = '["取消","删除"]'
    $(this).openWindow(setTitle,setContents,setButton); 
}); 
//修改挂单失败执行此代码 
$('.open-window-set-orders-fail').on('click',function(){ 
    setTitle = '提示'
    setContents = '网络异常修改失败,请稍后再试'
    setButton = '["确认"]'
    $(this).openWindow(setTitle,setContents,setButton); 
}); 
//修改订单失败执行此代码 
$('.open-window-set-indent-fail').on('click',function(){ 
    setTitle = '提示'
    setContents = '网络异常修改失败,请稍后再试'
    setButton = '["确认"]'
    $(this).openWindow(setTitle,setContents,setButton); 
}); 
//加载中蒙版 
$('.open-window-loading').on('click',function(){ 
    $('.loading').show(); 
}); 
 
 class="loading"> 
     src="images/loading.gif" /> 


分享到 :

发表评论

登录... 后才能评论