精华内容
下载资源
问答
  • 前端页面弹框样式

    2018-07-10 18:53:55
    用jquery实现的,html页面弹出框,提示框样式,包括确认框,提示框,自动消失框等
  • 4种弹框

    2020-05-11 17:55:00
    LghDialog弹框 优雅 窗口lhgdialog.min.js文件的url参数 A 参数形式为: self:指定弹出窗口的页面 类型:String 默认:'false' 说明:此参数只用在框架页面中,如果不写此参数或值为false时则窗口跨框架弹出在框架...

    1、最基本的三种弹窗

    alert,confirm,prompt

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>js三种弹窗</title>
        </head>
        <body>
            <span onclick="doson(1)">alert()</span>
            <span onclick="doson(2)">confirm(option)</span>
            <span onclick="doson(3)">prompt(option1,[option2])</span>
        </body>
        <script>
            function doson(num){
                if(num == 1){
                    alert("这是一Alert");
                }else if( num == 2){
                    //返回一个布尔值,点击确定返回true,点击取消返回false
                    var isbeauty = confirm("准备好,游山玩水了吗?");
                    if(isbeauty){
                        alert("OK, Let's Go now !");
                    }else{
                        alert("不再考虑考虑了");
                    }
                }else{
                    //option1:数据类型是字符串;是弹框里的提示文字。
                    //option2:数据类型是字符串;是弹框里输入框的value预留值,第二个参数为空时,弹框输入框中的值为空。
                    //返回一个输入框的内容
                    var tess = prompt("当山峰没有棱角的时候,你就开始好吗?");
                    alert(tess);
                }
            }
        </script>
    </html>

    4种弹框

    4种弹框

    4种弹框
    4种弹框

    2、lhgDialog弹窗提示窗口

    lhgDialog是一个功能强大且兼容面广的对话框组件,它拥有精致的界面与友好的接口
    兼容:IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>LghDialog弹框</title>
            <script type="text/javascript" src="lghdialog_js/jquery.min.js" ></script>
            <script type="text/javascript" src="lghdialog_js/lhgdialog.js" ></script>
        </head>
        <body>
            <a onclick="lghdialog()">优雅</a>
    
        </body>
        <script>
    
            //具体方法
            function lghdialog(){
                var dialog = $.dialog({
                        title: '欢迎',
                        content: '欢迎使用lhgdialog对话框组件!',
                        icon: 'success.gif',
                        ok: function(){
                                 this.title('警告').content('请注意lhgdialog两秒后将关闭!').lock().time(2);
                                return false;
                        }
                });
            }
        </script>
    </html>

    4种弹框4种弹框

    窗口lhgdialog.min.js文件的url参数
    A 参数形式为:

        <script type="text/javascript" src="lhgdialog.min.js?self=true&skin=chrome"></script>

    self:指定弹出窗口的页面
    类型:String
    默认:'false'
    说明:此参数只用在框架页面中,如果不写此参数或值为false时则窗口跨框架弹出在框架最顶层页面,如果值为true则不跨框架,而在当前面页弹出。

    skin:多皮肤共享CSS文件名
    类型:String
    默认:'default'
    说明:不写此参数则值为default。如果你想在同一页面使用不同皮肤的窗口,此处的值就为多皮肤共存的CSS的文件名
    url参数不需要设定的就可以不写,不写时就使用默认值。

    B 按钮相关

    ok:确定按钮回调函数
    类型:Function|Boolean
    默认:null
    说明:函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮
    cancel:取消按钮回调函数
    类型:Function|Boolean
    默认:null
    说明:1.函数如果返回false将阻止对话框关闭;函数this指针指向内部api;
    2.如果传入true表示只显示有关闭功能的按钮,标题栏的关闭按钮其实就是取消按钮,点击同样触发cancel事件
    3.如果值为false时则隐藏标题栏右边的关闭按钮
    okVal:确定按钮文字
    类型:String
    默认:确定
    cancelVal:取消按钮文字
    类型:String
    默认:取消
    min:是否显示最小化按钮
    类型:Boolean
    默认:true
    max:是否显示最大化按钮
    类型:Boolean
    默认:true
    button:自定义按钮
    类型:Array
    默认:null
    说明:
    配置参数成员:
    name —— 按钮名称
    callback —— 按下后执行的函数
    focus —— 是否聚焦点
    disabled —— 是否标记按钮为不可用状态(后续可使用扩展方法让其恢复可用状态)
    示例:
    参数如:[{name: '登录', callback: function () {}}, {name: '取消'}] 。注意点击按钮默认会触发按钮关闭动作,需要阻止触发关闭请让回调函数返回false

    C 尺寸相关
    width:指定窗口的宽度
    类型:Number|String
    默认:'auto'
    说明:1. 设置窗口的宽度,可以带单位。一般不需要设置此,对话框框架会自己适应内容
    2.如果设置为百分值单位,将会以根据浏览器可视范围作为基准,此时如果浏览器窗口大小被改变其也会进行相应的调整
    height:指定窗口的高度
    类型:Number|String
    默认:'auto'
    说明:1.设置窗口的高度,可以带单位。
    2.如果设置为百分值单位,将会以根据浏览器可视范围作为基准,此时如果浏览器窗口大小被改变其也会进行相应的调整
    minWidth:最小宽度限制
    类型:Number
    默认:96
    说明:此参数值只能为数字
    minHeight:最小高度限制
    类型:Number
    默认:32
    说明:此参数值只能为数字

    D 位置相关
    fixed:开启静止定位
    类型:Boolean
    默认:false
    说明:静止定位是css2.1的一个属性,它静止在浏览器某个地方不动,也不受滚动条拖动影响
    left:相对于可视区域的X轴的坐标
    类型:Number|String
    默认:'50%'
    说明:可以使用'0%' ~ '100%'作为相对坐标,如果浏览器窗口大小被改变其也会进行相应的调整
    top:相对于可视区域的Y轴的坐标
    类型:Number|String
    默认:'50%'
    说明:可以使用'0%' ~ '100%'作为相对坐标,如果浏览器窗口大小被改变其也会进行相应的调整

    E 交互相关
    time:设置对话框显示时间
    类型:Number
    默认:null
    说明:以秒为单位
    resize:是否允许用户调节尺寸
    类型:Boolean
    默认:true
    drag:是否允许用户拖动位置
    类型:Boolean
    默认:true
    esc:是否允许用户按Esc键关闭对话框
    类型:Boolean
    默认:true
    说明:只有窗口获得焦点后才能使用此功能
    cache:是否缓存iframe方式加载的窗口内容页
    类型:Boolean
    默认:true
    说明:只有使用iframe方式加载的单独页面的内容时此参数才有效
    extendDrag:是否开启增强拖拽体验
    类型:Boolean
    默认:true
    说明:1.此属性为全局性设置,不能在窗口调用的参数里设置,只能使用lhgdialog.setting.extendDrag来设置
    2.防止鼠标落入iframe导致不流畅,对超大对话框拖动优化
    F 视觉相关
    lock:开启锁屏
    类型:Boolean
    默认:false
    说明:中断用户对话框之外的交互,用于显示非常重要的操作/消息,所以不建议频繁使用它,它会让操作变得繁琐
    background:锁屏遮罩颜色
    类型:String
    默认:'#FFF'
    说明:请注意这是一个会影响到全局的配置,后续出现的对话框的遮罩颜色都和此设置一样,再设置不再起作用
    opacity:锁屏遮罩透明度
    类型:Number
    默认:.5
    说明:请注意这是一个会影响到全局的配置,后续出现的对话框的遮罩透明度都和此设置一样,再设置不再起作用
    icon:定义消息图标
    类型:String
    默认:null
    说明:可定义“skins/icons/”目录下的图标名作为参数名(一定要包含后缀名)
    titleIcon:标题栏左边的小图标
    类型:String
    默认:null
    说明:可定义“skins/icons/”目录下的图标名作为参数名(一定要包含后缀名)
    padding:内容与边界填充边距(即css padding)
    类型:String
    默认:'15px 10px'
    说明:如果内容页为iframe方式加载的则在css里需要设置为0,要不在IE6中易出问题
    skin:多皮肤共存时指定的皮肤样式
    类型:String
    默认:''
    说明:指定窗口要使用的皮肤的主类名
    G 高级相关
    id:设定对话框唯一标识
    类型:String|Number
    默认:null
    说明:1.防止重复弹出
    2.定义id后可以使用this.get(youID)和lhgdialog.list[youID]获取扩展方法
    zIndex:重置全局zIndex初始值
    类型:Number
    默认:1976
    说明:用来改变对话框叠加高度,请注意这是一个会影响到全局的配置,后续出现的对话框叠加高度将重新按此累加。
    init:对话框弹出后执行的函数
    类型:Function
    默认:null
    说明:如果是以iframe方式加载的内容页此函数会在内容页加载完成后执行
    close:对话框关闭前执行的函数
    类型:Function
    默认:null
    说明:函数如果返回false将阻止对话框关闭。请注意这不是关闭按钮的回调函数,无论何种方式关闭对话框,close都将执行。
    parent:打开子窗口的父窗口对象
    类型:Object
    默认:null
    说明:此参数只用在打开多层窗口都使用遮罩层时才会用到此参数,注意多层窗口锁屏时一定要加此参数


    窗口实例对象内部方法
    close():关闭对话框
    参数:无
    说明:在需要关闭窗口时可调用此方法
    reload(win,url):刷新或跳转指定的页面
    参数1:指定的要刷新或跳转的页面的window对象
    参数2:要跳转到的页面地址
    show():显示对话框
    参数:无
    hide():隐藏对话框
    参数:无
    title(value):写入标题
    参数1:标题的文本
    说明:无参数则返回创建的窗口对象实例
    content(value):向窗口中写入内容
    参数1:窗口中的内容
    说明:如果参数的前3个字符为'url:'参使用iframe方式加载单独的内容页,无参数则返回创建的窗口对象实例
    button(arguments):插入一个自定义按钮
    参数1:name -- 按钮名称
    参数2:callback -- 按下后执行的函数
    参数3:focus -- 是否聚焦点
    参数4:disabled -- 是否标记按钮为不可用状态(后续可使用扩展方法让其恢复可用状态)
    说明:此参数为多个对象
    示例:
    button({
    name: '登录',
    focus: true,
    callback: function(){}
    },{
    name: '取消'
    });
    position(left,top):重新定位对话框
    参数1:X轴的坐标
    参数2:Y轴的坐标
    说明:参数可以为数字或带单位的字符如:'200px'或使用'0%' ~ '100%'作为相对坐标
    size(width,height):重新设定对话框大小
    参数1:窗口的宽度
    参数2:窗口的高度
    说明:参数可以为数字或带单位的字符如:'200px'或使用'0%' ~ '100%'百分值单位
    max():最大化窗口
    参数:无
    min():最小化窗口
    参数:无
    lock():锁屏
    参数:无
    unlock():解锁
    参数:无
    time(val,callback):定时关闭(单位秒)
    参数1:数值,以秒为单位
    参数2:回调函数
    说明:参数2为窗口关闭前执行的函数
    focus() :自动设置窗口中焦点元素
    参数:无
    zindex() :置顶窗口
    参数:无
    get(id,object) :根据指定id获取相应的对象
    参数1:窗口的id
    参数2:是否返回的是窗口实例对象
    说明:参数2的值只有为数字1时才返回指定id的窗口的实例对象
    api:内容页中调用窗口实例对象接口
    说明:此对象属性是附加在iframe元素的一个属性,在iframe方式加载的内容页中通过调用此函数来获取窗口的实例对象,示例:var api = frameElement.api; 注:此句代码是加在iframe方式加载的内容页中的,一定要注意
    opener:加载窗口组件页面的window对象
    说明:此属性主要用在iframe方式加载的内容页中,示例:var api = frameElement.api, W = api.opener; 此时的W即为加载窗口组件页面的window对象
    iframe:iframe方式加载内容的iframe对象
    说明:此属性主要用于在窗口组件调用页面操作窗口中的iframe对象
    iwin:iframe方式加载内容页的window对象
    说明:此属性主要用于在窗口组件调用页面操作窗口中的window对象,示例:var dg = $.dialog({'url:content.html',init:function(){ if( this.iwin.document.body ) alert('窗口内容页加载完成'); });
    窗口外部方法
    $.dialog.focus:获取焦点的窗口实例对象
    说明:可以使用此属性获取儿得焦点的窗口的对象,示例:var dg = $.dialog.focus; 此时的dg就是当前焦点窗口的对象实例
    $.dialog.list:所有窗口对象实例的集合
    说明:通过此属性可获取所有打开的窗口对象,示例:关闭页面所有对话框
    var list = $.dialog.list;
    for( var i in list ){
    list[i].close();
    }
    $.dialog.top:获取lhgdialog可用最高层window对象
    说明:这与直接使用window.top不同,它能排除url参数self为true时定义的顶层页面为调用窗口组件页面或者顶层页面为框架集的情况
    $.dialog.data(name,value):跨框架数据共享写入接口
    参数1:存储的数据名
    参数2:将要存储的任意数据(无此项则返回被查询的数据,如果此值为false就删除指定名称的数据)
    说明:框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情,常规情况下你必须知道框架的名称才能进行数据交换,如果是在复杂的多层框架下操作简直就是噩梦。
    而data方法就是为了解决这个问题,你完全不用管框架层级问题,它可以写入任何类型的数据,而做到各个页面之间数据共享。
    扩展的一些提示性的窗口
    $.dialog.alert(content,callback):警告消息
    参数1:内容
    参数2:窗口关闭时执行的回调函数
    $.dialog.confirm(content,yes,no):确认
    参数1:内容
    参数2:确定按钮回调函数
    参数3:取消按钮回调函数
    $.dialog.prompt(content,yes,value):提问
    参数1:内容
    参数2:确定按钮回调函数
    参数3:文本框默认值
    $.dialog.tips(content,time,icon,callback):短暂提示
    参数1:内容
    参数2:显示时间
    参数3:提示图标
    参数4:提示关闭时执行的函数
    $.dialog.load(url,options,cache):Ajax填充内容
    参数1:地址
    参数2:配置参数
    参数3:是否允许缓存. 默认false

    3 优化Jquery弹框

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>优化jQuery提示框</title>
            <link href="./jquery_cj/Fytx_Tips.css" rel="stylesheet" type="text/css">
            <script src="./jquery_cj/jquery-1.10.2.js"></script>
            <script src="./jquery_cj/jquery.min.js"></script>
            <!--弹框颜色        -->
            <script type="text/javascript" src="./jquery_cj/Fytx_Tips_Config.js"></script>
            <script type="text/javascript" src="./jquery_cj/Fytx_Tips.js"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("#alertbtn").click(function() {
                        $.alert("提示信息", "这个是弹出alert框!");
                    });
                    $("#confirmbtn").click(function() {
                        $.confirm("提示信息", "这个是弹出confirm框!");
                    });
                    $.isok = function() {
                        alert("点击了确定按钮!");
                    }
                    $.iscancel = function() {
                        alert("点击了取消按钮!");
                    }
                    $("#toastbtn").click(function() {
                        $.toast("这个是弹出toast框!");
                    });
                });
            </script>
        </head>
    
        <body style="zoom: 1;">
            <p align="center">
                <input type="button" value="弹出alert框" id="alertbtn">
                <input type="button" value="弹出confirm框" id="confirmbtn">
                <input type="button" value="弹出toast框" id="toastbtn">
            </p>
    
        </body>
    
    </html>

    Fytx_Tips_Config.js

    var _fytx_alert_bg = 0.3;
    var _fytx_alert_bgcolor = "#000000";
    var _fytx_alert_box_bgcolor = "#ffffff";
    var _fytx_alert_title_color = "#333333";
    var _fytx_alert_titleline_color = "#3475f5";
    var _fytx_alert_message_color = "#333333";
    var _fytx_alert_btn_color = "#ffffff";
    var _fytx_alert_btn_bgcolor = "#3475f5";
    var _fytx_confirm_bg = 0.3;
    var _fytx_confirm_bgcolor = "#000000";
    var _fytx_confirm_box_bgcolor = "#ffffff";
    var _fytx_confirm_title_color = "#333333";
    var _fytx_confirm_titleline_color = "#3475f5";
    var _fytx_confirm_message_color = "#333333";
    var _fytx_confirm_okbtn_color = "#ffffff";
    var _fytx_confirm_okbtn_bgcolor = "#3475f5";
    var _fytx_confirm_cancelbtn_color = "#333333";
    var _fytx_confirm_cancelbtn_bgcolor = "#ffffff";
    var _fytx_toast_bg = 0.3;
    var _fytx_toast_bgcolor = "#000000";
    var _fytx_toast_box_bg = 0.5;
    var _fytx_toast_box_bgcolor = "#000000";
    var _fytx_toast_color = "#ffffff";
    var _fytx_toast_close = true;

    Fytx_Tips.css

        @charset "UTF-8";
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0
        }
    
        .fytx_alert_background {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999999
        }
    
        .fytx_alert_background .fytx_alert_box {
            width: 452px;
            height: auto;
            padding: 0 15px 20px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 8px;
            position: relative;
            top: 50%;
            left: 50%;
            margin: -167px 0 0 -226px
        }
    
        .fytx_alert_background .fytx_alert_title {
            width: 100%;
            height: 45px;
            border-bottom: 1px solid #99bafa;
            font-size: 16px;
            color: #333;
            line-height: 45px;
            text-align: center
        }
    
        .fytx_alert_background .fytx_alert_message {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 25px 40px 35px;
            text-align: center;
            font-size: 16px;
            color: #333;
            box-sizing: border-box;
            line-height: 28px
        }
    
        .fytx_alert_background .fytx_alert_btn {
            display: block;
            width: 100px;
            height: 34px;
            line-height: 34px;
            background-color: #3475f5;
            cursor: pointer;
            font-size: 14px;
            color: #fff;
            border-radius: 4px;
            border: 1px solid transparent;
            margin: 0 auto;
            text-align: center
        }
    
        .fytx_confirm_background {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999999
        }
    
        .fytx_confirm_background .fytx_confirm_box {
            width: 452px;
            height: auto;
            padding: 0 15px 20px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 8px;
            position: relative;
            top: 50%;
            left: 50%;
            margin: -167px 0 0 -226px
        }
    
        .fytx_confirm_background .fytx_confirm_title {
            width: 100%;
            height: 45px;
            border-bottom: 1px solid #99bafa;
            font-size: 16px;
            color: #333;
            line-height: 45px;
            text-align: center
        }
    
        .fytx_confirm_background .fytx_confirm_message {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 25px 40px 35px;
            text-align: center;
            font-size: 16px;
            color: #333;
            box-sizing: border-box;
            line-height: 28px
        }
    
        .fytx_confirm_background .fytx_confirm_okbtn {
            display: inline-block;
            width: 100px;
            height: 34px;
            line-height: 34px;
            background-color: #3475f5;
            cursor: pointer;
            font-size: 14px;
            color: #fff;
            border-radius: 4px;
            border: 1px solid transparent;
            text-align: center;
            margin-left: 84px;
            margin-right: 47px
        }
    
        .fytx_confirm_background .fytx_confirm_cancelbtn {
            display: inline-block;
            width: 100px;
            height: 34px;
            line-height: 34px;
            background: fff;
            cursor: pointer;
            font-size: 14px;
            color: #3475f5;
            border-radius: 4px;
            border: 1px solid transparent;
            text-align: center;
            border: 1px solid #3475f5
        }
    
        .fytx_toast_background {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999999
        }
    
        .fytx_toast_background .fytx_toast_box {
            width: 452px;
            height: auto;
            cursor: pointer;
            padding: 15px 20px;
            text-align: center;
            background: rgba(0, 0, 0, .5);
            color: #fff;
            font-size: 16px;
            border-radius: 8px;
            line-height: 24px;
            position: relative;
            top: 50%;
            left: 50%;
            margin: 0 0 0 -226px
        }

    Fytx_Tips.js

        var _fytx_toast_box = "";
        var _fytx_toast_background = "";
        var _fytx_toast_time = 0;
    
        function Fytx_Tips() {
            var _this = this;
            _fytx_toast_background = $('<div class="fytx_toast_background"></div>');
            _this.Fytx_alert = function(obj) {
                if($("div").is(".fytx_alert_background")) $('.fytx_alert_background').remove();
                var _fytx_alert_background = '<div class="fytx_alert_background"><div class="fytx_alert_box">' + '<div class="fytx_alert_title">' + obj.title + '</div>' + '<div class="fytx_alert_message">' + obj.message + '</div>' + '<span class="fytx_alert_btn">确定</span>' + '</div></div>';
                $('body').append(_fytx_alert_background);
                if(_fytx_alert_bg != "") {
                    var fytx_bgcolor = $.hextorgb(_fytx_alert_bgcolor);
                    $('.fytx_alert_background').css("background", "rgb(" + fytx_bgcolor + "," + _fytx_alert_bg + ")");
                }
                if(_fytx_alert_box_bgcolor != "") $('.fytx_alert_box').css("background-color", _fytx_alert_box_bgcolor);
                if(_fytx_alert_title_color != "") $('.fytx_alert_title').css("color", _fytx_alert_title_color);
                if(_fytx_alert_titleline_color != "") $('.fytx_alert_title').css("border-bottom", _fytx_alert_titleline_color + " 1px solid");
                if(_fytx_alert_message_color != "") $('.fytx_alert_message').css("color", _fytx_alert_message_color);
                if(_fytx_alert_btn_bgcolor != "") $('.fytx_alert_btn').css("background-color", _fytx_alert_btn_bgcolor);
                if(_fytx_alert_btn_color != "") $('.fytx_alert_btn').css("color", _fytx_alert_btn_color);
            }
            _this.Fytx_confirm = function(obj) {
                if($("div").is(".fytx_confirm_background")) $('.fytx_confirm_background').remove();
                var _fytx_confirm_background = '<div class="fytx_confirm_background"><div class="fytx_confirm_box"><div class="fytx_confirm_title">' + obj.title + '</div><div class="fytx_confirm_message">' + obj.message + '</div><span class="fytx_confirm_okbtn">确定</span><span class="fytx_confirm_cancelbtn">取消</span></div></div>';
                $('body').append(_fytx_confirm_background);
                if(_fytx_confirm_bg != "") {
                    var fytx_bgcolor = $.hextorgb(_fytx_confirm_bgcolor);
                    $('.fytx_confirm_background').css("background", "rgb(" + fytx_bgcolor + "," + _fytx_confirm_bg + ")");
                }
                if(_fytx_confirm_box_bgcolor != "") $('.fytx_confirm_box').css("background-color", _fytx_confirm_box_bgcolor);
                if(_fytx_confirm_title_color != "") $('.fytx_confirm_title').css("color", _fytx_confirm_title_color);
                if(_fytx_confirm_titleline_color != "") $('.fytx_confirm_title').css("border-bottom", _fytx_confirm_titleline_color + " 1px solid");
                if(_fytx_confirm_message_color != "") $('.fytx_confirm_message').css("color", _fytx_confirm_message_color);
                if(_fytx_confirm_okbtn_bgcolor != "") $('.fytx_confirm_okbtn').css("background-color", _fytx_confirm_okbtn_bgcolor);
                if(_fytx_confirm_okbtn_color != "") $('.fytx_confirm_okbtn').css("color", _fytx_confirm_okbtn_color);
                if(_fytx_confirm_cancelbtn_bgcolor != "") $('.fytx_confirm_cancelbtn').css("background-color", _fytx_confirm_cancelbtn_bgcolor);
                if(_fytx_confirm_cancelbtn_color != "") $('.fytx_confirm_cancelbtn').css("color", _fytx_confirm_cancelbtn_color);
            }, _this.Fytx_toast = function(mes, time) {
                if(!_fytx_toast_background.is(':hidden')) _fytx_toast_box.remove();
                _fytx_toast_box = $('<div class="fytx_toast_box">' + mes + '</div>');
                _fytx_toast_background.append(_fytx_toast_box);
                $('body').append(_fytx_toast_background);
                _fytx_toast_box.css({
                    'marginTop': -_fytx_toast_box.outerHeight() / 2 + 'px'
                });
                if(_fytx_toast_bg != "") {
                    var fytx_bgcolor = $.hextorgb(_fytx_toast_bgcolor);
                    $('.fytx_toast_background').css("background", "rgb(" + fytx_bgcolor + "," + _fytx_toast_bg + ")");
                }
                if(_fytx_toast_box_bg != "") {
                    var fytx_bgcolors = $.hextorgb(_fytx_toast_box_bgcolor);
                    $('.fytx_toast_box').css("background", "rgb(" + fytx_bgcolors + "," + _fytx_toast_box_bg + ")");
                }
                if(_fytx_toast_color != "") $('.fytx_toast_box').css("color", _fytx_toast_color);
                if(time > 0) {
                    var Etimer = null;
                    clearInterval(Etimer);
                    _fytx_toast_time = time;
                    Etimer = setInterval(function() {
                        _fytx_toast_time--;
                        if(_fytx_toast_time <= 0) {
                            clearInterval(Etimer);
                            _fytx_toast_background.remove();
                            _fytx_toast_box.remove();
                        }
                    }, 1000);
                }
            }, _this.Fytx_removetoast = function() {
                _fytx_toast_background.remove();
                _fytx_toast_box.remove();
            }, $("body").on("click", ".fytx_toast_box", function() {
                if(_fytx_toast_time > 0 && _fytx_toast_close) {
                    _fytx_toast_background.remove();
                    _fytx_toast_box.remove();
                    _fytx_toast_time = 0;
                }
            });
        }
        $(document).ready(function() {
            var _fytx_confirm_isokstr = "";
            var _fytx_confirm_iscancelstr = "";
            var Fytx = new Fytx_Tips();
            $.alert = function(title, msg) {
                Fytx.Fytx_alert({
                    title: title,
                    message: msg
                })
            }, $("body").on("click", ".fytx_alert_btn", function() {
                $(".fytx_alert_background").hide();
            });
            $.confirm = function(title, msg, isokstr, iscancelstr) {
                _fytx_confirm_isokstr = arguments[2] ? arguments[2] : "";
                _fytx_confirm_iscancelstr = arguments[3] ? arguments[3] : "";
                Fytx.Fytx_confirm({
                    title: title,
                    message: msg
                });
            }, $("body").on("click", ".fytx_confirm_okbtn", function() {
                $(".fytx_confirm_background").hide();
                if(typeof $.isok === "function") {
                    if(_fytx_confirm_isokstr == "") {
                        $.isok();
                    } else {
                        $.isok(_fytx_confirm_isokstr);
                    }
                }
            });
            $("body").on("click", ".fytx_confirm_cancelbtn", function() {
                $(".fytx_confirm_background").hide();
                if(typeof $.iscancel === "function") {
                    if(_fytx_confirm_iscancelstr == "") {
                        $.iscancel();
                    } else {
                        $.iscancel(_fytx_confirm_iscancelstr);
                    }
                }
            });
            $.toast = function(msg, time, state) {
                time = arguments[1] ? arguments[1] : ((arguments[1] == 0) ? 0 : 3);
                state = arguments[2] ? arguments[2] : ((arguments[2] == 0) ? 0 : undefined);
                if(state != undefined) {
                    if(state == 1) {
                        _fytx_toast_close = true;
                    } else if(state == 0) {
                        _fytx_toast_close = false;
                    } else {
                        _fytx_toast_close = state;
                    }
                }
                Fytx.Fytx_toast(msg, time);
            }, $.removetoast = function() {
                Fytx.Fytx_removetoast();
            }
            $.hextorgb = function(str) {
                if(str != "") {
                    str = str.replace("#", "");
                    if(str.length == 3) str = str.substr(0, 1) + str.substr(0, 1) + str.substr(1, 1) + str.substr(1, 1) + str.substr(2, 1) + str.substr(2, 1);
                    var hex = str.match(/../g);
                    for(var i = 0; i < 3; i++) hex[i] = parseInt(hex[i], 16);
                    return hex;
                } else {
                    return "0,0,0";
                }
            }
        });

    4 layer一个让你想到即可做到的Web弹窗

    《layer》

    4种弹框

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8" />
                <title>Layer</title>
                <script type="text/javascript" src="js/jquery.min.js" ></script>
                <script type="text/javascript" src="layer/layer.js" ></script>
                <style>
                    a{
                        color: #FD482C;
                    }
                </style>
            </head>
            <body>
                <div id="frozen_redant">
                    <ol type="A">
                        <li>望着天下起了雪</li>
                        <li>满天的雪花是那么浪漫</li>
                        <li>对你的爱就像那片雪花</li>
                        <li>散落一地</li>
                    </ol>
                </div>
                <a onclick="layer_dialog(1)">初体验</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(2)">皮肤</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(3)">询问</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(4)">提示</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(5)">切换风格</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(6)">捕获</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(7)">页面</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(8)">自定义</a> &nbsp;&nbsp;
                <a id="xifu" onclick="layer_dialog(9)">吸附tips</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(10)">url其他页面</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(11)">url其他窗</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(12)">正在加载</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(13)">加载中....</a> &nbsp;&nbsp;
                <a id="oherxifu" onclick="layer_dialog(14)">小tips</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(15)">prompt层</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(16)">tab标签</a> &nbsp;&nbsp;
                <hr />
                <span style="color: indianred;">提示信息</span>&nbsp;&nbsp;
                <a onclick="layer_dialog(17)">demo1</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(18)">demo2</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(19)">demo3</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(20)">demo4</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(21)">demo5</a> &nbsp;&nbsp;
                <hr/>
                <span style="color: indianred;">加载中</span>&nbsp;&nbsp;
                <a onclick="layer_dialog(22)">demo1</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(23)">demo2</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(24)">demo3</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(25)">demo4</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(26)">demo5</a> &nbsp;&nbsp;
                <hr />
                <span style="color: indianred;">弹窗设置</span>&nbsp;&nbsp;
                <a id="wuxian" onclick="layer_dialog(27)">无限弹窗</a> &nbsp;&nbsp;
                <a onclick="layer_dialog(28)">透明询问框</a> &nbsp;&nbsp;
    
            </body>
            <script>
                function layer_dialog(num){
                    switch (num){
                        case 28:
                            //配置一个透明的询问框
                            layer.msg('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', {
                                time: 20000, //20s后自动关闭
                                btn: ['明白了', '知道了', '哦']
                            });
                            break;
                        case 27:
                        //多窗口模式,层叠置顶
                            layer.open({
                                type: 2 //此处以iframe举例
                                ,title: '当你选择该窗体时,即会在最顶端'
                                ,area: ['390px', '330px']
                                ,shade: 0
                                ,offset: [ //为了演示,随机坐标
                                    Math.random()*($(window).height()-300)
                                    ,Math.random()*($(window).width()-390)
                                ]
                                ,maxmin: true
                                ,content: 'https://blog.51cto.com/13479739/2493634'
                                ,btn: ['继续弹出', '全部关闭'] //只是为了演示
                                ,yes: function(){
                                    $("#wuxian").click(); //此处只是为了演示,实际使用可以剔除
                                }
                                ,btn2: function(){
                                    layer.closeAll();
                                }
    
                                ,zIndex: layer.zIndex //重点1
                                ,success: function(layero){
                                    layer.setTop(layero); //重点2
                                }
                            });
                            break;
                        case 22:
                            //加载层-默认风格
                            layer.load();
                            break;
                        case 23:
                            //加载层-风格2
                            layer.load(1);
                            break;
                        case 24:
                            //加载层-风格3
                            layer.load(2);
                            break;                  
                        case 25:
                            //加载层-风格4
                            layer.msg('加载中', {
                                icon: 16
                                ,shade: 0.01
                            });
                            break;              
                        case 26:
                            //打酱油
                            layer.msg('打个酱油', {icon: 4});
                            break;
                        case 17:
                            //信息框-例1
                            layer.alert('见到你真的很高兴', {icon: 6});
                            break;
                        case 18:
                            //信息框-例2
                            layer.msg('你确定你很帅么?', {
                                time: 0 //不自动关闭
                                ,btn: ['必须啊', '丑到爆']
                                ,yes: function(index){
                                    layer.close(index);
                                    layer.msg('雅蠛蝶 O.o', {
                                        icon: 6
                                        ,btn: ['嗷','嗷','嗷']
                                    });
                                }
                            });
                            break;
                        case 19:
                            //信息框-例3
                            layer.msg('这是最常用的吧');
                            break;
                        case 20:
                            //信息框-例4
                            layer.msg('不开心。。', {icon: 5});
                            break;
                        case 21:
                            //信息框-例5
                            layer.msg('玩命卖萌中', function(){
                            //关闭后的操作
                            });
                            break;
                        case 16:
                            //tab层
                            layer.tab({
                                area: ['600px', '300px'],
                                tab: [{
                                    title: 'TAB1', 
                                    content: '页面显示的内容<br/>页面显示的内容<br/>'
                                }, {
                                    title: 'TAB2', 
                                    content: '钱呢女女'
                                }, {
                                    title: 'TAB3', 
                                    content: '内容3'
                                }]
                            });
                            break;
                        case 15:
                        //prompt层
                        layer.prompt({title: '输入任何口令,并确认', formType: 1}, function(pass, index){
                            layer.close(index);
                            layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text, index){
                                layer.close(index);
                                layer.msg('演示完毕!您的口令:'+ pass +'<br>您最后写下了:'+text);
                            });
                        });
                        break;
    
                        case 14:
                            //小tips
                            layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '#oherxifu', {
                             //1上 默认右,3下 4左
                             tips: [1, '#3595CC'],
                                time: 4000
                            });
                            break;
    
                        case 13:
                            //loading层
                            var index = layer.load(1, {
                                shade: [0.1,'#fff'] //0.1透明度的白色背景
                            });
                            break;
    
                        case 12:
                            //加载层
                            var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
                            break;
    
                        case 11:
                            //iframe窗
                            layer.open({
                                type: 2,
                                title: false,
                                closeBtn: 0, //不显示关闭按钮
                                shade: [0],
                                area: ['340px', '215px'],
                                offset: 'rb', //右下角弹出
                                time: 2000, //2秒后自动关闭
                                anim: 2,
                                content: ['https://blog.51cto.com/13479739', 'no'], //iframe的url,no代表不显示滚动条
                                end: function(){ //此处用于演示
                                    layer.open({
                                        type: 2,
                                        title: '很多时候,我们想最大化看,比如像这个页面。',
                                        shadeClose: true,
                                        shade: false,
                                        maxmin: true, //开启最大化最小化按钮
                                        area: ['893px', '600px'],
                                        content: '//blog.51cto.com/13479739/2493634'
                                    });
                                }
                            });
                            break;
                        case 10:
                            //iframe层
                            layer.open({
                                type: 2,
                                title: 'layer mobile页',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['380px', '70%'],
                                content: '1.html/' //iframe的url
                            }); 
                            break;
                        case 9:
                            //tips层
                            layer.tips('我是tips,我吸附在这个元素上!!!', '#xifu');
                            break;
                        case 1://第一个LayUI弹框
                            layer.alert('这是你的第一个LayUI弹框');
                            break;
                        case 2://第三方拓展皮肤
                            layer.alert('第三方拓展皮肤', {
                                icon: 1,
                                skin: 'layer-ext-moon' //[《Layer皮肤制作说明》](https://layer.layui.com/skin.html#publish)
                            })
                            break;
                        case 3:
                            //询问框
                            layer.confirm('愿意和俺一起,游山玩水,巴山夜雨吗?', {
                                btn: ['可以','不行'] //按钮
                            }, function(){
                                layer.msg('就这么约定了', {icon: 1});
                            }, function(){
                                layer.msg('怎么能这样,再想想', {
                                    time: 20000, //20s后自动关闭
                                    btn: ['明白了', '知道了']
                                });
                            });
                            break;
                        case 4:
                            //提示层
                            layer.msg('给我点提示吧!');
                            break;
                        case 5:
                            //墨绿深蓝风
                            layer.alert('墨绿风格,点击确认看深蓝', {
                                skin: 'layui-layer-molv' //样式类名
                                ,closeBtn: 0
                            }, function(){
                                layer.alert('偶吧深蓝style', {
                                    skin: 'layui-layer-lan'
                                    ,closeBtn: 0
                                    ,anim: 4 //动画类型
                                });
                            });
                            break;
                        case 6:
                            //捕获页
                            layer.open({
                                type: 1,
                                shade: false,
                                title: false, //不显示标题
                                //捕获的元素
                                content: $('#frozen_redant'), 
                                cancel: function(){
                                    layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6});
                                }
                            });
                            break;
                        case 7:
                            //页面层
                            layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['420px', '240px'], //宽高
                                content: '这里是html页面的内容'
                            });
                            break;
                        case 8:
                            //自定页
                            layer.open({
                                type: 1,
                                skin: 'layer-ext-moon', //样式类名
                                closeBtn: 0, //不显示关闭按钮
                                anim: 2,
                                shadeClose: true, //开启遮罩关闭
                                content: '即传入skin:"样式名",然后你就可以为所欲为了。你怎么样给她整容都行'
                            });
                            break;
    
                        default:
                            break;
                    }
                }
            </script>
        </html>

    4种弹框

    【PS:每个按钮,这里就不点了,自己点去吧】

    展开全文
  • IOS 中的三种弹框模式

    2021-03-02 11:03:08
    创建一个中间弹框,有“取消”和“确定按钮”,设置代理为当前控制器 UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:@"点击了图片按钮" delegate:self cancelButtonTitle:@"取消" ...
    #pragma mark 方法1
    
    /**
    
     *  一般用在IOS8以前,用到了代理
    
     */
    
    - (void)use1
    
    {
    
        // 1.创建一个中间弹框,有“取消”和“确定按钮”,设置代理为当前控制器
    
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:@"点击了图片按钮" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
    
        
    
        // 2.显示在屏幕上
    
        [alert show];
    
    }
    
    
    #pragma mark 方法2
    
    /**
    
     *  用在IOS8,没有用到代理
    
     */
    
    - (void)use2
    
    {
    
        // 1.创建弹框控制器, UIAlertControllerStyleAlert这个样式代表弹框显示在屏幕中央
    
        UIAlertController *alertVc = [UIAlertController alertControllerWithTitle:@"提示" message:@"点击了头像" preferredStyle:UIAlertControllerStyleAlert];
    
    
        // 2.添加取消按钮,block中存放点击了“取消”按钮要执行的操作
    
       UIAlertAction *cancle = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {
    
            NSLog(@"点击了取消");
    
        }];
    
        UIAlertAction *confirm = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
    
            NSLog(@"点击了确定按钮");
    
        }];
    
        // 3.将“取消”和“确定”按钮加入到弹框控制器中
    
        [alertVc addAction:cancle];
    
        [alertVc addAction:confirm];
    
        
    
        // 4.控制器 展示弹框控件,完成时不做任何操作
    
        [self presentViewController:alertVc animated:YES completion:^{
    
            nil;
    
        }];
    
    }
    
    
    #pragma mark 方法3
    
    /**
    
     *  用在IOS8,没有用到代理。跟方式2唯一不同的是:弹框的样式变为“UIAlertControllerStyleActionSheet”, 弹框出现在屏幕底部
    
     */
    
    - (void)use3
    
    {
    
        UIAlertController *alertVc = [UIAlertController alertControllerWithTitle:@"提示" message:@"点击了头像" preferredStyle:UIAlertControllerStyleActionSheet];
    
        UIAlertAction *cancle = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {
    
            NSLog(@"点击了取消");
    
        }];
    
        UIAlertAction *confirm = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
    
            NSLog(@"点击了确定按钮");
    
        }];
    
        [alertVc addAction:cancle];
    
        [alertVc addAction:confirm];
    
        
    
        [self presentViewController:alertVc animated:YES completion:^{
    
            nil;
    
        }];
    
    }
    
    
    #pragma mark 监听方式1中出现的弹框中的按钮点击,控制器来监听点击了取消还是确定按钮
    
    - (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
    
    {
    
        // 默认取消按钮索引为0
    
        if (buttonIndex == 0) NSLog(@"点击了取消按钮");
    
        else NSLog(@"点击了确定按钮");
    
    }
    ————————————————
    版权声明:本文为CSDN博主「aochitianxia」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/aochitianxia/article/details/46300755

     

    展开全文
  • 弹出框类型

    2018-12-22 11:37:00
    alert() 弹出个提示框 (确定) window.alert参数,只有一个,显示警告框的信息; 无返回值. <script> window.alert("确定.") </script>...confirm() 弹出个确认框 (确定,取消) ...alert(bln...

    alert() 弹出个提示框 (确定)

    window.alert参数,只有一个,显示警告框的信息;
    无返回值.

    <script>
    window.alert("确定.")
    </script>

     


    confirm() 弹出个确认框 (确定,取消)

    <script> 
    var bln = window.confirm("确定吗?"); 
    alert(bln) 
    </script>


    prompt() 弹出个输入框 让你输入东西

     

    window.prompt参数,有两个, 
    第一个参数,显示提示输入框的信息. 
    第二个参数,用于显示输入框的默认值. 
    返回,用户输入的值.

    <script> 
    var str = window.prompt("请输入密码","password") 
    alert(str); 
    </script>

     

     

     

    使用消息框
    使用警告、提示和确认
    可以使用警告、确认和提示消息框来获得用户的输入。这些消息框是 window 对象的接口方法。由于 window 对象位于对象层次的顶层,因此实际应用中不必使用这些消息框的全名(例如 "window.alert()"),不过采用全名是一个好注意,这样有助于您记住这些消息框属于哪个对象。

    警告消息框
    alert 方法有一个参数,即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是说,用户必须先关闭该消息框然后才能继续进行操作。

    window.alert("欢迎!请按“确定”继续。");
    确认消息框
    使用确认消息框可向用户问一个“是-或-否”问题,并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为 true 或 false。该消息框也是模式对话框:用户必须在响应该对话框(单击一个按钮)将其关闭后,才能进行下一步操作。

    var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");
    if (truthBeTold) {
    window.alert("欢迎访问我们的 Web 页!");
    } else window.alert("再见啦!");

    提示消息框
    提示消息框提供了一个文本字段,用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数,则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则,默认文本为 "<undefined>"。

    与alert( ) 和 confirm( ) 方法类似,prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框

    var theResponse = window.prompt("欢迎?","请在此输入您的姓名。");
    window.confirm 参数就只有一个.显示提示框的信息.
    按确定,返回true; 按取消返回false.

    转载于:https://www.cnblogs.com/lanai/p/10160453.html

    展开全文
  • pop 弹框 窗口

    千次阅读 2018-07-16 17:50:19
    /* 弹框的有样式 */ .pop{ max-width:700px; background-color:#ffffff; padding:20px; box-shadow:0 0 20px 3px rgba(0,0,0,0.4); border-radius: 5px; display:none; position:absolute; z-index...
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>商品订单</title>
      <script src="jquery-3.3.1.min.js"></script>
    	<style> 
         	/* 弹框的有样式 */
           .pop{
             	max-width:700px;
             	background-color:#ffffff;        
             	padding:20px;          
              box-shadow:0 0 20px 3px rgba(0,0,0,0.4);
              border-radius: 5px;
              display:none;
              position:absolute;  
              z-index:110;      
           }
           .cancel{
           	    width:100%;
           	    height:30px;
           }
    	       .cancel img{
    	       	width:25px;
    	       	height:25px;
    	       	float:right;
           }
            .pop p{
            	width:100%;
            	height:40px;
            	text-align:center;
              line-height:40px;
            }
            .pop p:nth-of-type(1){
            	color:#1FA1DF;
            	font-size:18px;
            	font-weight:bold;
    
            }
             .pop p:nth-of-type(2){
             	color:#333333;
             	font-size:14px;
             }
             .pop p:nth-of-type(2) span{
             	color:#f00;
             }
             .pop p:nth-of-type(3){
              color:#333333;
              font-size:18px;
              font-weight:bold;
             }
             .pop .button{
              width:64%;  
              height:40px;
              margin:40px auto 20px;       
             }
             .pop .button a{
              display:block;
              float:left;
              width:140px;
              height:40px;
              text-align:center;
              line-height:40px;
              text-decoration:none;
              font-size:14px;
              border-radius: 6px;
             }
             .pop .button a:nth-of-type(1){
              color:#333;
              background-color:#f2f2f2;
             }
              .pop .button a:nth-of-type(2){
              color:#ffffff;
              background-color:#169BD5;
              margin-left:50px;
             }
          /*点击按钮*/
           .clickBtn{
              display:block;
              width:150px;
              height:40px;
              line-height:40px;
              background-color:#ccc;
              text-align:center;
              text-decoration: none;
              color:#fff;
           }
           #mb{
              width:100%;
              height:100%;
              background-color:rgba(0,0,0,0.3);
              position:fixed;
              top:0;
              left:0;
              z-index:100;
              display:none;
           }
    	</style>
    </head>
    <body>
    <!-- jquery的样式写法 -->
      <a href="javascript:;" class="clickBtn" id="clickBtn" onclick="pop()">点击事件</a> 
      <div id="mb"></div>
    	<div class="pop" id="pop">	  
    		<p>该功能需要付费升级后使用</p>
    		<p>该账号目前为普通账号,不能使用<span>商城、</span><span>防伪、</span><span>促销</span>功能,徐付费升级后才能使用。</p>
    		<p>1999元/年</p>
    		<div class="button">
          <a href="#" onclick="stop();">取消</a>			
    			<a href="#">我要升级</a>
    		</div>
    	</div>
      <!-- 原生的样式写法 -->
      <!-- <a href="javascript:;" class="clickBtn" id="clickBtn">点击事件</a>
      <div id="mb"></div>
      <div class="pop" id="pop">    
        <p>该功能需要付费升级后使用</p>
        <p>该账号目前为普通账号,不能使用<span>商城、</span><span>防伪、</span><span>促销</span>功能,徐付费升级后才能使用。</p>
        <p>1999元/年</p>
        <div class="button"> 
          <a href="#" id="close">取消</a>
          <a href="#">我要升级</a>
        </div>
      </div> -->
    </body>
    <script> 
      function stop() {
        $('#mb').toggle();
        $('.pop').toggle();
      }
    
      function pop() {
          $('#mb').toggle();
          $('.pop').toggle();
          if ($(window).width() < 800) {
              $(window).width(800);
          }
          var left = $(window).width() / 2 - $('.pop').width() / 2;
          var top = $(window).height() / 2 - $('.pop').height() / 2;
          $('.pop').css({ 'left': left, 'top': top });
      }
     
    </script>
    
    <script>
     /*原生弹框的写法*/
      /*var mb = document.getElementById('mb');
      var pop = document.getElementById('pop');
      var clickBtn = document.getElementById('clickBtn');
      var close = document.getElementById('close');
    
      function showpop(){  
        pop.style.display = 'block';
        mb.style.display = 'block';
        var dW = document.documentElement.clientWidth;
        if(dW<=800){
          dW = 800;
        }
        var dH = document.documentElement.scrollHeight;
        mb.style.width = dW+'px';
        mb.style.height = dH+'px';
        var newLeft = document.documentElement.clientWidth/2 - pop.offsetWidth/2;
        var newTop = document.documentElement.clientHeight/2 - pop.offsetHeight/2;
        pop.style.left = newLeft +'px';
        pop.style.top = newTop +'px';
      }
    
      clickBtn.onclick = function(){  
        showpop();
      }
      window.onresize = function(){
        if(pop.style.display == 'block'){
          showpop();
        }   
      }  
      close.onclick = function(){
        mb.style.display = 'none';
        pop.style.display = 'none';
      }*/
    </script>
    
    </html>

     

    展开全文
  • HTML页面的三种弹框方式

    千次阅读 2019-10-08 14:19:06
    1、弹出警告框,带确定按钮:alert 2、弹出,选择框 有确认和取消按钮 confirm 3、弹出,输入框 :prompt 转载于:https://www.cnblogs.com/stj123/p/9829675.html
  • layui弹框的简单使用

    千次阅读 2019-04-17 11:11:52
    layui弹框的简单使用 1.准备工作 首先去http://layer.layui.com/去下载layer插件: 然后解压,找到layer文件夹copy到你的开发环境中图片如下: Jquery要求1.8以上,在引入layer.js就可以用了。 <script...
  • Alert 类型: 点击ok driver.switchTo().alert().accept();   2). Confirm 类型: 点击ok driver.switchTo().alert().accept(); 点击取消 driver.switchTo().alert().dismiss...
  • 我们在上传一种类型的文件时一定希望只显示某种类型的文件,我们需要给弹框设置一个默认值 添加 accept 属性<input type="file" accept=".xlsx"> //设置默认选择office Excel文件OK!
  • ios中的三种弹框

    千次阅读 2015-12-08 11:43:43
    目前为止,已经知道3种IOS弹框: 1、系统弹框-底部弹框 UIActionSheet  (1)用法:处理用户非常危险的操作,比如注销系统等 (2)举例: UIActionSheet *sheet = [[UIActionSheet alloc] ...
  • //弹框模式 public static final String MODEL = "com.kingdee.eas.base.uiframe.client.UIModelDialogFactory" ; //编辑windows public static final String EDITWIN = ...
  • prompt弹框的使用

    千次阅读 2017-07-12 23:29:35
    一直做着后台的工作,前台的东西好像接触的也不少,但是研究的比较少,其实前端的设计与实现也是“博大精深”。... JS中有三种弹框方式:confirm,弹出一个询问框,有确定和取消按钮;alert,弹出对话框并输出一段提
  • 主要介绍了Android TeaScreenPopupWindow多类型筛选弹框功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 主要介绍了struts json 类型异常返回到js弹框问题解决办法的相关资料,需要的朋友可以参考下
  • Selenium Webdriver弹出框的种种类型

    万次阅读 2016-11-21 19:27:40
    类型: 点击 ok dr.switchTo().alert().accept(); 2). Confirm  类型 : 点击 ok dr.switchTo().alert().accept(); 点击 Cancel dr.switchTo().alert().dismiss();...
  • MessageBox 弹框 type字段表明消息类型,可以为success,error,info和warning 转载于:https://www.cnblogs.com/karila/p/7623999.html
  • 关于弹窗的四种类型(四种控件)

    千次阅读 2019-11-15 15:30:06
    四大控件:Alert(对话框)、Action Sheets(控制面板)、Toast(小提示)、Snackbar(快捷提示) Alert:对话框是一种模态弹窗,当用户将进行一些危险或者不可逆操作时,系统将会以Alert对话框的形式提醒用户是否...
  • TeaScreenPopupWindow - 多类型筛选弹框
  • 最近很多文章都在说弹框设计,其实一个弹框就是一个弹框而已,没那么多讲究。我用一句话就可以概括,这句话叫做——扩展句,然后我把它扩展成了一篇文章。(有没有被我调皮的样子萌到?爱你们~)  本来传统意义上的...
  • 类型筛选弹框、多数据筛选、多样化diy、单选or多选、必藏 (Multiple Type Screening Boxes, Multiple Data Screening, Diversified Diy, Single or Multiple Selection, Must Star) Github地址 YangsBryant/...
  • 弹框类型自见解分为四种: 1,页面弹框 2,警告提示框(alert) 3,确认消息框(confirm) 4,提示消息对话(prompt) 提示: selenium 提供switch_to_alert()方法定位到 alert/confifirm/prompt对话框。 2...
  • Layui各种样式弹出框

    千次阅读 2019-06-30 17:55:43
    Layui各种样式弹出框 layer.msg(“操作成功”, {icon: 1}); layer.msg(“操作失败”, {icon: 2}); layer.msg(“询问信息”, {icon: 3}); layer.msg(“灰色”, {icon: 4}); layer.msg(“红色哭脸”, {icon: 5});...
  • 三种弹出框

    2016-02-26 15:14:00
    这三个都是属于弹框类型的 使用警告、提示和确认消息框来获得用户的输入。这些消息框是 window 对象的接口方法。由于 window 对象位于对象层次的顶层,因此实际应用中不必使用这些消息框的全名(例如 "window.alert...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<...link rel="stylesheet" type="text/css" href="css/layer.css">......
  • 金蝶EAS 弹出消息框

    千次阅读 2017-10-27 14:59:21
    MsgBox类提供了几种类型的消息框来弹出提示消息, 一般有showInfo(),showWarning(),showError(),showConfirm2() 等等。每种方法都有传入不同参数的重载方法, 一般为传入一个字符串或者是一个Component对象和一个...
  • 今天小编就为大家分享一篇layui的表单提交以及验证和修改弹框的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Dialog 弹框(几种常用弹框

    千次阅读 2019-06-28 10:33:45
    setCancelable:点击空白,弹框是否消失(true 消失)(flase 不消失) 1.只显示标题和内容 AlertDialog alertDialog1 = new AlertDialog.Builder(this)  .setTitle("这是标题")//标题  .setMessage("这是...
  • input file文件上传的默认弹框是全部文件,但是有时候在写项目的时候为了方便会让其默认选中xls文件或者 图片,因此需要对其添加一个accept来实现这个功能 具体代码如下: <!-- 默认全部 --> <input ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,821
精华内容 5,928
关键字:

弹框类型