js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例

前端技术 2023/09/04 JavaScript

本文实例讲述了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件。分享给大家供大家参考。具体如下：

完整实例代码点击此处本站下载。

用法

<input type=\"button\" id=\"btn_dialog\" value=\"打开浮层\"/>
<div id=\"dialog-content\" style=\"display:none;\">这是内容</div>
<script src=\"../src/jquery-1.9.1.min.js\"></script>
<script src=\"../src/dialog.js\"></script>
<script>
 var dialog = new Dialog();
 dialog.init({target:\"#dialog-content\",trigger:\"#btn_dialog\",mask:true,width:500,height:300,title:\'标题\'});
</script>

或者用jquery方式调用:

<input type=\"button\" id=\"btn_dialogjquery\" value=\"jq打开浮层\"/>
<div id=\"dialog-contentjq\" style=\"display:none;\">这是内容22</div>
<script src=\"../src/dialog-jquery.js\"></script>
<script>
 $(\'#btn_dialogjquery\').Dialog({target:\"#dialog-contentjq\",mask:true,width:500,height:300,title:\'标题\'})
</script>

继承类alert和confirm提示(jquery模式下)：

html:

<input type=\"button\" id=\"btn_alert\" value=\"alert\"/>
<input type=\"button\" id=\"btn_alert2\" value=\"alert定时关闭\"/>
<input type=\"button\" id=\"btn_confirm\" value=\"confirm三种按钮\"/>
<input type=\"button\" id=\"btn_confirmdefault\" value=\"confirm默认\"/>

js:

$(\'#btn_alert\').click(function(){
  $.alert(\'选好商品才能上传素材哦\',true,function(){
   alert(\'你点击了ok\')
  })
});
$(\'#btn_alert2\').click(function(){
  $.alert(\'选好商品才能上传素材哦\')
});
$(\'#btn_confirm\').click(function(){
  $.confirm(\'下载全部 9 张图片至本地相册?<div class=\"confirm-title2\">文字内容已复制</div>\',[{yes:\"是\"},{no:\'否\'},{close:\'关闭\'}],function(type){
   $.alert(\'您点击了\'+type);
   this.hide();
  });
})
$(\'#btn_confirmdefault\').click(function(){
  $.confirm(\'你确定要删除这条消息吗? \',null,function(type){
   $.alert(\'您点击了\'+type);
   this.hide();
  });
})

属性或方法:

属性：

trigger:
  触发对象
 
target:
  弹出内容，可以为#id,或者jquery对象
 
mask:
  是否有遮罩层
 
title:
  标题
 
zIndex:
  z-index
 
closeTpl:
  关闭html(默认:<span class=\"ui-dialog-close js-dialog-close\">x</span>)
 
titleTpl:
  标题html(默认：<div class=\"ui-dialog-title\"></div>) 
 
方法及回调：

show:
  显示弹层
 
hide:
  隐藏
 
beforeShow：function(content)
  显示前的方法回调,content是浮层内容对象
 
beforeHide：function(content)
  隐藏前的方法回调,content是浮层内容对象
 
setPosition:function()
  设置位置居中

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/11747

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案