javascript - artdialog V6为什么只能调用一次?
怪我咯
怪我咯 2017-04-11 10:03:49
0
1
2167

将artdialog封装为一个方法可以无限调用,但是指向一个变量却只能调用一次

(1)作为方法使用

function mkUserMsg(){
  dialog({
      id:'mkUserMsg',
      title:'我的消息',
      width:300,
      height:400,
      content:"<p class='abs0 mkUser-msg-wrap' id='mkUserMsg'></p>"
 }).show();
}

(2)赋值给一个变量

var msg=dialog({
      id:'mkUserMsg',
      title:'我的消息',
      width:300,
      height:400,
      content:"<p class='abs0 mkUser-msg-wrap' id='mkUserMsg'></p>"
 })
function mkUserMsg(){
    msg.show()
}

补充1:
我知道下面的代码作用是相等的,关键是为什么(1)可以无限调用,(2)就只能点击一次。

我自己定义了一个全局变量解决了这个问题(非要这样写的原因是因为我要传值并且用户点击页面某个元素之后通过这个唯一变量重置弹出框的宽度)

var mkMsg;
function mkUserMsg(num){
  mkMsg=dialog({
        id:'mkUserMsg',
        title:'我的消息',
        skin:'mkDia-btnCenter',
        width:300,
        height:400,
        content:"<p class='abs0 mkUser-msg-wrap' id='mkUserMsg'></p>",
        button: [
          {
            value: '编辑',
            callback: function () {
                $('#mkUserMsg').load('mkUser-msgEdit.html');
                this.width(300);
                return false;
            }
          },
          {
            value: '保存',
            callback: function () {
            },
            autofocus: true
          },
          {
            value: '取消',
            callback: function () {
            }
          }
        ]
      }).showModal();
      $('#mkUserMsg').load('mkUser-msg.html');
}
$('body').on('click', '.mkUser-info', function(event) {
    event.preventDefault();
    mkMsg.width(700);
});

补充2
之所以(2)只能调用一次是因为点击右上角的“X”调用的方法是remove()直接销毁了对话框,因此再点击就不会出现了,而(1)就像回答者member说的又实例化了一个dialog,因此每次点击都会触发,我们只需要在(2)的基础上取消右上角关闭按钮,点击其他按钮调用close()方法并且返回false就可以实现(1)的效果了

var d = dialog({
    title: 'message',
    content: '<input autofocus />',
    cancel: false,//不显示右上角关闭按钮
    ok:function(){
        this.close();//关闭不销毁
        return false;//不写的话会调用remove()方法
    }
});
$('.btn').click(function(event) {
    d.showModal();
});
怪我咯
怪我咯

走同样的路,发现不同的人生

reply all(1)
迷茫
dialog({
      id:'mkUserMsg',
      title:'我的消息',
      width:300,
      height:400,
      content:"<p class='abs0 mkUser-msg-wrap' id='mkUserMsg'></p>"
}).show();

等于下文

var d = dialog({
      id:'mkUserMsg',
      title:'我的消息',
      width:300,
      height:400,
      content:"<p class='abs0 mkUser-msg-wrap' id='mkUserMsg'></p>"
});
d.show();

dialog()只是不停构建的过程
能不能多看点JS基础再来问,好吗?

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template