如何使用语义UI‘添加内容’的javascript行为？

Question

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

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

<div class="ui dimmable">

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

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

</div>

js是这样的：

$('.ui.dimmable')
  .dimmer(
    {on: 'click'},
    'add content', $('#move'))
;

显然，有一种称为'add content'的行为可以将元素从DOM中分离出来，并将其添加到调光器中。

有没有人有办法让它工作呢？

注意--上面的代码确实在点击“.ui.dimmable”时启动了调光器，我只是不能掌握如何使用文档中提到的‘behaviour’语义UI，也找不到任何例子。

谢谢!

Answer 1

默认情况下，调光器内容是黑色的，因此您需要将#move元素设置为白色。我尝试用.ui.inverted.header将其更改为h2

然后你需要将你想要的内容添加到调光器中，如下所示：

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

并将其配置为在单击时显示

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

Try it on this JSFiddle