Javascript 我希望画布对象显示在弹出窗口中

我是JS编程的初学者。我有一个类CanvasObjet，它是功能性的（我在我的HTML上测试了它），只是我希望当我们点击一些按钮时，这个画布会出现在弹出窗口中。我尝试了window.open（），但它并不是我想要的，alert（）在[HtmlCanvaElement]中返回我的画布

class Formulaire {
constructor() {
reserv.addEventListener("click", ()=>{
//the function i need for a popup of canvas here
localStorage.setItem("nom",nom.value);
localStorage.setItem("prenom",prenom.value);
this.tempsRestant();
temps.textContent = "Lorem Ipsum" + prenom.value + "Lorem Ipsum " + nom.value;
})

class CanvasObjet {
constructor() {
this.canvas = document.getElementById('canvas');
//Appelle l'interface CanvasRenderingContext2d
this.ctx = this.canvas.getContext('2d');
this.ctx.strokeStyle = '#000000';
this.ctx.lineWidth = 3;
this.draw = false;
this.mousePosition = {
    x: 0,
    y: 0
    };
this.lastPosition = this.mousePosition;
this.clearButton = document.getElementById("clear");
this.canvas.width = 300;
this.canvas.height = 300;
this.evenements();
};


<canvas id="canvas" width="300" height="300"></canvas>

类公式{
构造函数（）{
reserv.addEventListener（“单击”，（）=>{
//我需要的功能是在这里弹出画布
setItem（“nom”，nom.value）；
setItem（“prenom”，prenom.value）；
this.tempsRestant（）；
temps.textContent=“Lorem Ipsum”+prenom.value+“Lorem Ipsum”+nom.value；
})
CanvasObjet类{
构造函数（）{
this.canvas=document.getElementById（'canvas'）；
//Appelle l'interface CanvasRenderingContext2d
this.ctx=this.canvas.getContext（'2d'）；
this.ctx.strokeStyle='#000000'；
this.ctx.lineWidth=3；
this.draw=false；
此。鼠标位置={
x:0,，
y:0
};
this.lastPosition=this.mousePosition；
this.clearButton=document.getElementById（“clear”）；
this.canvas.width=300；
this.canvas.height=300；
这个是；
};

窗口。打开会在新选项卡中打开某些内容

如果你想要一个弹出窗口，你需要用css来做这件事。但是我建议你使用bootstrap，我一直都在使用它

查看modals（弹出窗口）的文档：

---

我希望这能有所帮助。

请共享所有代码！以便更好地帮助您！好的，完成了！thxhi thx为您提供建议，我不想使用bootstrap，但我仍然学习并发现了modals jQuery，因此thx感谢您