能动态改变内容吗 复用 about overlay

[afc163]

Vague issue

[zhishaofei3]

var yinDaoDialog = new Overlay({
        template: "<div></div>",
        width: 589,
        height: 408,
        style: {
            background: "url(/images/yindao/index-yindao1.png) no-repeat"
        },
        align: {
            baseElement: ".t2 .wrap",
            baseXY: [315, 11]
        },
        attrs: {
            hasMask: true
        }
    });

yinDaoDialog.show(); 之前 修改 element align之类的

[zhishaofei3]

define(function (require, exports, module) {
    var $ = require("$"),
    Overlay = require("arale/overlay/1.1.4/overlay-debug"),
    mask = require("arale/overlay/1.1.4/mask");
    mask.set({opacity:0.7});
    var yinDaoDialog = new Overlay({
        template: "<div></div>",
        width: 589,
        height: 408,
        style: {
            background: "url(/images/yindao/index-yindao1.png) no-repeat"
        },
        align: {
            baseElement: ".t2 .wrap",
            baseXY: [315, 11]
        },
        attrs: {
            hasMask: true
        }
    });

    var YinDao = function(){};
    YinDao.prototype = {
        setObj: function(opts) {

        },
        start: function() {
//          yinDaoDialog.template = '<div>哈哈</div>';
            yinDaoDialog.set("template", "<div>哈哈</div>")
            mask.show();
            yinDaoDialog.show();
        },
        next: function() {

        },
        end: function() {
        }
    }

    module.exports = YinDao;
});

我想用这个做一个网站的新手引导，我只想有一个Overlay的实例，那能不能每次在我的start方法里去动态改变yinDaoDialog里的各种值，然后再show()，我不知道我这样写好不好？希望你能指导一下

[afc163]

可以

[zhishaofei3]

但是

yinDaoDialog.set("template", "<div>哈哈</div>")

好像没管用

[afc163]

template 貌似比较特殊。

你可以直接：

yinDaoDialog.element.html("<div>哈哈</div>");

[zhishaofei3]

谢谢！！我发现每次new一个新的并直接传入obj更合适一些。
就像

define(function (require, exports, module) {
    var $ = require("$"),
        Overlay = require("arale/overlay/1.1.4/overlay-debug"),
        mask = require("arale/overlay/1.1.4/mask");
    mask.set({opacity: 0.7});
    var yinDaoDialog;

    var YinDao = function () {
    };
    YinDao.prototype = {
        optsArr: null,
        index: 0,
        setObj: function (optsArr) {
            this.optsArr = optsArr;
        },
        start: function () {
            var me = this;
            if (me.optsArr && me.optsArr.length) {
                var obj = me.optsArr[me.index];
                obj.nextBtn = obj.nextBtn || ".next-yindao";
                obj.endBtn = obj.endBtn || ".end-yindao";
                obj.style = obj.style || {};
                obj.style.color = obj.style.color || "#FFF";

                yinDaoDialog = new Overlay(obj);
                obj.template.find(".next-yindao").click(function(){
                    me.next();
                });
                obj.template.find(".end-yindao").click(function(){
                    me.end();
                });
                mask.show();
                yinDaoDialog.show();
            }
        },
        next: function () {
            var me = this;
            yinDaoDialog.hide();
            me.index++;
            me.start();
        },
        end: function () {
        }
    }
    module.exports = YinDao;
});