2

どうすればこれを実装できますか？何かアドバイスはありますか？

4

2 に答える 2

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!");

お役に立てば幸いです:)

于 2014-10-24T13:19:02.680 に答える
0

これをFlashで実装した方法は、キャンバス全体のサイズの透明な画像をすべての上に配置し、その上にダイアログボックスを配置することでした。ダミー画像は、すべてのマウスクリックをキャプチャして無視し、ユーザーがダイアログボックス以外のものを操作できないようにします。

これはEaselJSで機能するはずです。ダミー画像を半透明の灰色にするなどの操作もできるので、モーダルダイアログの外側のすべてが暗くなります。

ボックス外のすべてのアクティビティも停止する必要がある場合は、Ticker.setPause（）関数を使用してtick（）イベントの送信を停止するのが最も簡単な方法だと思います。

注：これはキャンバス内でのみモーダルであり、ブラウザーやWebページの他の部分には影響しません。

于 2012-11-16T19:38:24.267 に答える