如何在引导面板上创建文本覆盖答案

【问题标题】：How to create text overlay on a bootstrap panel如何在引导面板上创建文本覆盖
【发布时间】：2017-12-06 11:40:11
【问题描述】：

我只是想知道是否有人可以向我展示使用某种叠加层在 jquery/javascript 的面板上显示一些文本的最佳方式。

我想禁用面板中的所有内容，然后在中间显示一个大的“已取消”。

现在我只有一个像这样的常规引导面板jsfiddle

这是我目前的一些代码

$(".panel").addClass('.disabledbutton');

.disabledbutton {
  pointer-events: none;
  opacity: 0.4;
}

<div class="container">

  <div class="panel panel-default">
    <div class="panel-heading">
      Panel title
    </div>
    <div class="panel-body">
      Panel content
    </div>
    
  </div>

</div>

【问题讨论】：

您的意思是弹出文字说“已取消”吗？
不，没有弹出窗口。只是禁用面板中的所有内容，然后在面板中心甚至只是面板主体显示一个大胖“取消”。这在 jquery 中很容易做到吗？

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

如果我理解正确，最简单的方法是，将另一个 div 放入面板中，并在其中写入取消，然后默认隐藏它，然后在您希望它取消时显示它，所以

HTML

<div class="panel-body">
   <p>Panel content</p>
   <div class="panel-body_cancelled">
       <h1>CANCELLED</h1>
   </div>
</div>

然后在你的 CSS 中

.panel-body_cancelled{
    display: none;
}

.panel-body_cancelled_active{
    display: block;
    z-index: 10000;
}

然后在你的 jQuery 中说你想通过点击事件来激活被取消的 div

$('.yourbutton').click(function(){
    $(.panel-body_cancelled).toggleClass('panel-body_cancelled_active');
})

【讨论】：