zoukankan      html  css  js  c++  java
  • 一个pop弹窗

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    </head>
    <body>
    <script type="text/javascript">
    <!--
    function ($) {
    // debugger;

    var Pop = function (opt) {
    this.default_opt = {
    type: 'alert',
    title: '提示信息',
    content: '这是提示信息',
    callback: null,
    callback_1: null,
    callback_2: null
    };
    this.opt = $.extend({}, this.default_opt, opt);
    this.root = null;
    this.template = '<div class="xw-mask"><div class="xw-pop-cont"><div class="xw-pop-body"><p class="xw-pop-title">{{title}}</p><p class="xw-pop-content">{{content}}</p></div><div class="xw-pop-foot">{{type}}</div></div></div>';
    this.alert = '<div class="xw-pop-btn alert-btn">好</div>';
    this.confirm = '<div class="xw-pop-btn confirm-btn confirm-btn-1">取消</div><div class="xw-pop-btn confirm-btn confirm-btn-2">确定</div>';
    }

    Pop.prototype = {
    init: function () {
    this.create();
    this.bind(this.opt);
    },

    create: function () {
    this.root = $(this.html(this.opt)).appendTo('body');
    },

    html: function (opt) {
    return this.template.replace('{{title}}', opt.title).replace('{{content}}', opt.content).replace('{{type}}', this[opt.type]);
    },

    bind: function (opt) {
    var self = this;
    self.root.find('.xw-pop-btn').on('click', function () {
    if(opt.type == 'alert' && opt.callback)
    opt.callback();
    else if($(this).hasClass('confirm-btn-1') && opt.callback_1)
    opt.callback_1();
    else if($(this).hasClass('confirm-btn-2') && opt.callback_2)
    opt.callback_2();

    self.root.remove();
    self.root = null;
    });
    }
    }

    $.pop = function (opts) {
    var pop = new Pop(opts);
    pop.init();
    }
    })($);

    //-->
    </script>
    </body>
    </html>

  • 相关阅读:
    12.精益敏捷项目管理——产品协调小组笔记
    打字游戏
    提升权限
    下载者
    SMTP实现发送邮箱2(封装版)
    SMTP实现发送邮箱1
    电子邮件协议详解
    JSON运用在文件
    JSON函数表2
    JSON函数表1
  • 原文地址:https://www.cnblogs.com/zhouzhou163/p/6100478.html
Copyright © 2011-2022 走看看