Jz JavaScript Popup

引入 jz.js，样式自动载入

jz.alert 弹出提示

jz.alert("hello world");

jz.alert 弹出提示定位，0-9，重复点击看效果

jz.alert({
    //内容
    content: "定位，0-9 重复点击看效果",
    //空白关闭
    blank: true,
    //按钮文字
    okValue:"朕知道了",

    /*
        1-9数字键盘的位置对应屏幕的位置，0不定位（仅初始化居中）
        1左下角，2底部居中，3右下角，
        4垂直居左，5水平垂直居中，6垂直居右，
        7左上角，8顶部居中，9右上角

        7 8 9
        4 5 6
        1 2 3
    */
    align: Math.ceil(Math.random()*10)-1
})

jz.alert 弹出提示事件

jz.alert("hello world " + (new Date()).valueOf(),{
    //确定事件
    ok: function(){
        jz.msg("ok回调")
    },
    //关闭
    close: function(){
        jz.msg('close回调')
    },
    //移除
    remove: function(){
        jz.msg('remove回调',{align:8,single:false})
    }
})

jz.alert 弹出提示倒计时、不透明度、按钮文字、阻止关闭、不显示关闭按钮

jz.alert({
    //标题
    title: "阻止关闭",
    content: "hello world " + (new Date()).valueOf(),
    //倒计时自动关闭
    time: 5,
    //启用遮罩层，0-1的不透明度
    mask: .5,
    //阻止关闭
    ok: function(){
        jz.msg("阻止关闭");
        return false;
    },
    //不显示关闭按钮
    close: false
})

jz.msg 气泡消息

jz.msg("hello world "+ (new Date()).valueOf())

jz.msg 气泡消息定位遮罩层

jz.msg({
    content: "hello world " + (new Date()).valueOf(),
    mask: .05, //遮罩层不透明度
    align: 8, //顶部居中
    time: 8, //倒计时
    blank: true, //空白关闭
    fixed: true, //绝对定位（固定顶部）
    drag: true,   //拖拽
    width:"50%" //宽度
})

jz.confirm 询问确定，取消、关闭回调

jz.confirm("hello world " + (new Date()).valueOf(),{
    //确定
    ok: function(){
        jz.msg("ok")
    },
    //取消
    cancel: function(){
        jz.msg("cancel")
    },
    //关闭
    close: function(){
        jz.msg("close")
    }
})

jz.iframe 子页面

jz.iframe({
    src: "https://ss.js.org/"
})

jz.iframe 子页面滚动条、宽高，定位，遮罩层

jz.iframe({
    title: "站点标题",
    src: "https://ss.js.org/",
    //宽度，不带单位默认为PX
    width: "350px",
    //高度，支持百分比
    height: "90%",
    //有滚动条
    scrolling: true,
    //定位方式
    align: 5,
    //不透明度
    mask: .6,
    //空白关闭
    blank: true,
    //非绝对定位
    fixed: false
})

jz.iframe 子页面无标题、全屏

jz.iframe({
    title: false,
    src: "https://ss.js.org/",
    width: "100%",
    height: "100%",
    //倒计时关闭
    time: 5,
    scrolling: true
})

jz.iframe 子页面传值、关闭

jz.iframe({
    src: "iframe.html"
})

文档

Jz JavaScript Popup

参数列表：
     
title：标题    text/html/false     false不显示标题
content：文本信息    text/html（jz.iframe不传）
footer：底部按钮包    bool    false不显示
time：倒计时关闭 单位（秒）     number（jz.msg默认4秒）
blank：点击空白关闭    bool（默认false）     
mask：遮罩层    true、false、0-1不透明度
fixed：绝对位置  bool（position:fixed）    即启用不受滚动条影响
align： 对齐方式 数字键盘1-9，默认5水平垂直，false、0忽略对齐（仅初始化居中）
single：只弹出一个    bool
drag：拖动     bool（jz.msg默认false）     
ok：确定回调     function/false（确定回调/不显示确定按钮）
okValue：确定按钮文本
cancel：取消回调  function/false（取消回调/不显示取消按钮）     
cancelValue：取消按钮文本
close：窗口关闭回调    function/bool（关闭回调/不显示，有标题时）
remove：移除回调  function
src：弹窗地址    text（jz.iframe用）
width：弹窗宽度 如"400px"、"40em"、"90%"，百分比或固定的单位值
height： 弹窗高度 如"400px"、"40em"、"90%"，百分比或固定的单位值
scrolling： iframe是否有滚动条    bool（默认false）
    
popup为基方法，msg、alert、confirm、iframe都基于popup提供支持，popup返回整个弹窗对象
popup.fn为拓展，涵盖对象、方法


得到弹窗的所有信息：对象、方法
var jzart = jz.alert("hello world");
console.log(jzart.fn);

对象：
jzart.fn.global：弹窗整个对象
jzart.fn.obj：调用弹窗时传的参数
jzart.fn.body：弹窗内容主体
jzart.fn.zindex：Z轴层叠高度，构成弹窗ID的标识
jzart.fn.mask：遮罩层，遮罩层的ID是jzart.fn.zindex-1，层叠顺序要低于弹窗对象

思维拓展：
给jzart.fn.body对象添加类样式，就实现了自定义样式

方法：
jzart.fn.hide()：隐藏弹窗
jzart.fn.show()：显示弹窗
jzart.fn.remove()：移除弹窗

jz.tip 气泡提示

jz.tip({
    //目标：#ID 或 Element
    target: "#seTip",
    content: "hello world " + (new Date()).valueOf(),
    blank: true,
    //焦点选中target对象，即focus效果，方便输入框提示用
    focus: true,
    //倒计时关闭，单位：秒
    time: 8,
    //方向 可选：top|right|bottom|left，默认bottom
    align: "top"
});

文档

tip小提示 
     
参数列表：

target：#id/Element
content：提示信息    text/html
single：只弹出一个    bool
time：倒计时关闭 单位：秒     number（默认不关闭）
blank：点击空白关闭    bool（默认false）
focus：焦点选中目标    bool（默认false）

Jz JavaScript Popup v2.0.0