jz弹窗示例 v1.0.1

j.alert j.msg j.confirm j.iframe 弹窗返回的对象及方法文档 j.tip

j.alert("hello world");

j.alert({
    content:"hello world " + (new Date()).valueOf(),
    blank:true,

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

j.alert("hello world " + (new Date()).valueOf(),{
    ok:function(){
        j.alert("ok回调")    
    },
    close:function(){
        j.alert('close回调')
    },
    remove:function(){
        j.alert('remove回调')
    }
})

j.alert({
    title:"警告",
    content:"hello world " + (new Date()).valueOf(),
    time:9, //倒计时自动关闭
    mask:.7, //启用遮罩层，0-1的不透明度
    okValue:"OK", //按钮文字
    ok:function(){
        j.alert("不允许关闭",{align:8,time:2,blank:true});
        return false;
    },
    close:false
})

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

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

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

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

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

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

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

var jzart = j.alert("hello world");

//得到弹窗的所有信息：对象、方法，
//如不支持console方法，请换浏览器查看，弹窗不影响使用
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弹窗

     *  参数列表：
    
     *  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为拓展，涵盖对象、方法

     */

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

    /*  tip小提示 
     
     *  参数列表：

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

     */

jz弹窗插件 demo v1.0.1 （一个文件，约15KB）