我想创建一个模态，当我单击具有 id 的按钮时，应该打开一个带有卡片的模态

Question

我已经创建了一个课程页面并创建了一个全屏，单击按钮时应该打开该全屏，模式也打开了，但我在 JS 中遇到错误。 让 value = colc[details.target.id]

if(details.target.tagName == "BUTTON"){

       

        fullscreen.style.opacity = 1;
        fullscreen.style.pointerEvents = "auto";

       inData = `<div id="fsCard">
                <h1>${value.heading}</h1>
                </div>
            `
     
}
   i am having error in value.heading 

我尝试创建一个模式，当单击按钮并且它正在打开时应该打开该模式，但模式不包含我在事件侦听器中创建的卡片

Answer 1

当您创建

dialog

时，您可以通过

innerHTML

添加您的卡。

document.getElementById('button')
  .addEventListener('click', () => {
    const dialog = document.getElementById('dialog');
    
    dialog.innerHTML = document.getElementById('input').value;
    dialog.open = true;
  });
  
document.getElementById('dialog')
  .addEventListener('click', ({target}) => {
    target.open = false;
  });

<input id="input" value="This will show up in the modal">
<button id="button">Click me</button>

<dialog id="dialog"></dialog>