如何使用语义UI“添加内容”javascript行为？

我正在尝试启动一个语义UI调光器，其标记如下：

<p id="move">Move me</p>

<div class="ui dimmable">

   <h3 class="ui header">
     Overlayable Section
   </h3>

   <div class="ui dimmer"></div>

</div>

显然，有一种行为称为应该从DOM中分离一个元素并将其添加到调光器中

有人对如何使这项工作有想法吗

注意-以上内容确实会在点击“.ui.dimmable”时启动调光器，我只是不知道如何使用文档中提到的“行为”语义ui，也找不到任何示例

---

谢谢

调光器内容默认为黑色，因此需要将移动元素设置为白色。我尝试使用.ui.inversed.header将其更改为h2

然后，您需要通过以下方式将所需内容添加到调光器中：

$(".ui.dimmable").dimmer("add content", $("#move"));

并将其配置为单击时显示

$(".ui.dimmable").dimmer({
    on: "click"
});

---

非常感谢@NoSoyTsundere-我看到它在JSFIDLE上工作。我应该澄清我试图实现的目标：内容应该在调光器打开之前就存在，然后在调光器打开时移到调光器。单击该内容不应关闭调光器，但单击元素外部但在调光器中应将其关闭。我已尝试在单击要移动的元件时打开调光器，但单击后调光器将无法关闭。你有什么想法吗？好的，已经开始工作了：但是你知道一旦调光器关闭，这个元件是否可以被替换到原来的位置？谢谢好了，我们终于走了。正如我在第一条评论中所描述的那样。

$(".ui.dimmable").dimmer({
    on: "click"
});