CODEWITHSUNDEEP
easeljscreatejs
IvanVlado
IvanVlado

Reputation: 63

easeljs - modal dialog box?

How can I implement this? Any advices?

Upvotes: 2

Views: 1323

Answers (2)

Avatar
Avatar

Reputation: 15194

This is how I did it in 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!");

Hope that helps :)

Upvotes: 1

Ask About Monica
Ask About Monica

Reputation: 845

The way I've implemented this in Flash was to put a transparent image the size of the entire canvas over everything, and then the dialog box on top of that. The dummy image will capture and ignore all mouse clicks, not letting the user interact with anything other than the dialog box.

This should work with EaselJS. You can also do stuff like make the dummy image a semi-transparent grey, so it makes everything outside the modal dialog darken.

If you also need to have all activity outside of the box stop, I think the easiest way is to use the Ticker.setPause() function to stop tick() events from being sent.

Note: This only is modal within the canvas, and doesn't effect the browser or the rest of the web page.

Upvotes: 0

Related Questions