Javascript 禁用其他字段后，单击popover上的文本框

我有一个带有popover的文本框我想单击显示popover后的第一个文本框，现在我需要使用黑色或任何颜色禁用背景色，如何禁用它，如何写入和如何放置此代码

现在我的结构

我需要这样的

$（文档）.ready（函数（）{
$（'.popr'）.popr（）；
});
$（文档）。在（'click'，'#feugate'，函数（）{
警惕（‘步态’）；
});
$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover（）；
$（'[data toggle=“popover”]'）。在（“单击”，函数（）{
$（“#messageTextBox”）.val（$（this.find（“div”）.text（））；
});
});
（函数（$）{
$.fn.popr=函数（选项）{
变量集=$.extend（{
“速度”：200，
“模式”：“底部”
}，选项）；
返回此值。每个（函数（）{
var popr_cont='.popr_container'+set.mode；
var popr_show=true；
$（此）。单击（函数（事件）
{
$（'.popr_container_top'）.remove（）；
$（'.popr_container_bottom'）.remove（）；
如果（流行音乐节目）
{
event.stopPropagation（）；
popr_show=假；
}
其他的
{
popr_show=真；
}
var d_m=设置模式；
if（$（this.attr（'data-mode'））
{
d_m=$（this.attr（'data-mode'））
popr_cont='.popr_container_'+d_m；
}
var out=''+$（'div[data box id=“'+$（this）.attr（'data-id'）+''']'））.html（）；
$（此）。追加（输出）；
var w_t=$（popr_cont）.outerWidth（）；
var w_e=$（this）.width（）；
var m_l=（w_e/2）-（w_t/2）；
$（popr_cont）.css（'margin-left'，m_l+'px'）；
$（this.removeAttr（'title alt'）；
如果（d_m=='top'）
{
var w_h=$（popr_cont）.outerHeight（）+39；
$（popr_cont）.css（'margin-top'，'-'+w_h+'px'）；
}
$（popr_cont）.fadeIn（设定速度）；
});
$（'html'）。单击（函数（）
{
$（'.popr_container_top'）.remove（）；
$（'.popr_container_bottom'）.remove（）；
popr_show=真；
});
});
};
})（jQuery）
.popr
{
光标：指针；
}
波普先生
{
颜色：#333；
文字装饰：无；
边界：0；
}
.popr盒
{
显示：无；
}
.popr_内容
{
背景色：#fff；
填充：7px0；
边距：0；宽度：200px；
高度：自动；
}
.popr项目
{
字体系列：无衬线；
颜色：#333；文本对齐：居中；
字体大小：16px；
填充：4px29px 5px29px；边框底部：实心1px#fbeeee；
}
.popr项目：悬停
{
颜色：#333；
背景色：#DCDC；
}
.popr_容器_底部
{
显示：无；
位置：绝对位置；
边缘顶部：10px；
盒影：2PX2PX5PX#f9f9f9；
z指数：1000；
}
.popr_容器_顶部
{
显示：无；
位置：绝对位置；
盒影：2PX2PX5PX#f9f9f9；
z指数：1000；
}
.popr_point_top
{
位置：相对位置；
背景：#fff；
边框：1px实心#DCDC；
}
.popr_point_top、.popr_point_bottom{
位置：相对位置；
背景：#fff；
边界半径：12px；
}
.popr_point_top:之后，.popr_point_top:之前
{
位置：绝对位置；
指针事件：无；
边框：实心透明；
最高：100%；
内容：“；
身高：0；
宽度：0；
}
.popr_point_top:之后
{
边框顶部颜色：#fff；
边框宽度：8px；
左：50%；
左边距：-8px；
}
.popr_point_top:之前
{
边框顶部颜色：#DCDC；
边框宽度：9px；
左：50%；
左边距：-9px；
}
.popr_点_底：之后，.popr_点_底：之前
{
位置：绝对位置；
指针事件：无；
边框：实心透明；
底部：100%；
内容：“；
身高：0；
宽度：0；
}
.popr_point_bottom:之后
{
边框底色：#fff；
边框宽度：8px；
左：50%；
左边距：-8px；
}
.popr_point_bottom:之前
{
边框底色：#DCDC；
边框宽度：9px；
左：50%；
左边距：-9px；
}
.popover标题{
文本对齐：居中；颜色：红色；
}
.定制府绸{
边界：没有！重要；
文本对齐：居中；
}
.定制popover li:第n个孩子（2）{
边框顶部：1px实心#ccc！重要；
}
.定制府绸李：最后一个孩子{
边框顶部：1px实心#ccc！重要；
}
#标题pop{字体大小：12px；颜色：#b89981；}

票据类别
请检查此项

我已经用

HTML

JQuery

$("#messageTextBox").on('focus',function(){
  $("#layer").addClass("layer");
});

$("#messageTextBox").on('focusout',function(){
  $("#layer").removeClass("layer");
});

说明：

我们只是在
#messageTextBox
的
focus
上的div中添加了layer类，然后在
focusout
上删除它。其余的工作由图层CSS类完成
请检查此项是否有效，然后让我知道，以便我可以转到回答先生，谢谢你的回答这是你要找的吗？是的先生，我需要这样请，向上投票回答谢谢
.layer{
  position:absolute;
  top:30px;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  z-index:99;
}

$("#messageTextBox").on('focus',function(){
  $("#layer").addClass("layer");
});

$("#messageTextBox").on('focusout',function(){
  $("#layer").removeClass("layer");
});