Question

我该如何实现？有什么建议吗？

Answer 1

这就是我在easeljs中的表现：

var stage = new createjs.Stage('canvas');
stage.width = $('#canvas').width();
stage.height = $('#canvas').height();

// warning box / modal dialog for user infos
var warnbox = new createjs.Shape();
warnbox.graphics.beginFill('#000');
warnbox.alpha = 0.85;
warnbox.graphics.drawRect(0, 0, stage.width, stage.height);
warnbox.graphics.endFill();
stage.addChild(warnbox);
warnbox.visible = false;

// confirm button for modal dialog box
var buttonok = new createjs.Shape();
buttonok.graphics.beginFill('#428BCA');
buttonok.graphics.setStrokeStyle(2,'round').beginStroke('#357EBD');
buttonok.graphics.drawRoundRect(0, 0, 170, 50, 5);
buttonok.x = stage.width/2-85;
buttonok.y = stage.height/2+70;
buttonok.cursor = "pointer";
stage.addChild(buttonok);
buttonok.visible = false;

var label_info = new createjs.Text("Your message here", "30px Arial", "#F0F0F0");
label_info.x = stage.width/2;
label_info.y = stage.height/2-110;
label_info.textAlign = 'center';
label_info.lineWidth = 800;
label_info.lineHeight = 50;
stage.addChild(label_info);
label_info.visible = false;

var label_ok = new createjs.Text("Continue", "25px Arial", "#F0F0F0");
label_ok.x = buttonok.x+85;
label_ok.y = buttonok.y+13;
label_ok.textAlign = 'center';
label_ok.lineWidth = 100;
label_ok.lineHeight = 50;
label_ok.cursor = "pointer";
stage.addChild(label_ok);
label_ok.visible = false;

function dialogbox(msg) {
    warnbox.visible = label_info.visible = buttonok.visible = label_ok.visible = true;
    // bring warnbox to front
    stage.setChildIndex(warnbox, stage.getNumChildren()-1); 
    stage.setChildIndex(label_info, stage.getNumChildren()-1);  
    stage.setChildIndex(buttonok, stage.getNumChildren()-1);    
    stage.setChildIndex(label_ok, stage.getNumChildren()-1);    
    label_info.text = msg;
}

buttonok.on("click", function(evt) {
    warnbox.visible = label_info.visible = buttonok.visible = label_ok.visible = false;
    resetScene();
});
label_ok.on("click", function(evt) {
    warnbox.visible = label_info.visible = buttonok.visible = label_ok.visible = false;
    resetScene();
});


// trigger
dialogbox("Congratulations, this is your modal box!");

希望有所帮助：）

Answer 2

我在Flash中实现这一点的方法是将整个画布大小的透明图像放在所有内容上，然后在其上面放置对话框。虚拟图像将捕获并忽略所有鼠标点击，不允许用户与对话框以外的任何内容进行交互。

这应该与EaselJS一起使用。您还可以执行诸如将虚拟图像设置为半透明灰色之类的操作，因此它会使模态对话框外的所有内容变暗。

如果你还需要在框外停止所有活动，我认为最简单的方法是使用Ticker.setPause（）函数来停止发送tick（）事件。

注意：这只是画布中的模态，不会影响浏览器或网页的其余部分。

画架 - 模态对话框？

2 个答案: