Javascript 色盒不'；当我从click callback调用它时，它看起来不正常

这就是我尝试的：

$('.color-box-link').click(
  function(){
   $.colorbox({html: '<p>tophat</p>'})
  }
)

$（'.color box link'）。单击(
函数（）{
$.colorbox（{html:'tophat
'}）
}
)

这段代码显示了一个中断的对话框：

但调整窗口大小后，将显示调整大小并修复的相同对话框：

此外，我在我的控制台日志中看到：

错误：cboxElement缺少设置对象

另一方面，当我从控制台执行此代码时：

$.colorbox({html: '<p>tophat</p>'})

$.colorbox（{html:'tophat
'}）

我看到完美的彩盒：

有什么问题吗？
jQuery 1.9.1
配色箱1.4.33

$('.color-box-link').click(
  $('.colorbox').text('tophat')
)

---

安全的解决方案，除非你想摆弄精确的css，因为

正在破坏你的css
我认为这是css的问题。