Javascript 如何获得显示弹出窗口和样式的按钮

我有一个按钮，按下时会从未确认变为已确认，并显示一个弹出窗口。我想在单击时让未确认按钮打开弹出窗口，然后在用户单击保存按钮后将文本和颜色更改为已确认。我该怎么做呢

正文{
背景图片：url（“BackgroundAxure.png”）；
背景色：#f2f0ed；
位置：自动；
}
表th:N个孩子（3），td:N个孩子（3）{
显示：无；
}
身体{
左侧填充：20px；
右边填充：20px；
}
#标志{
边缘顶部：10px；
位置：固定；
宽度：300px；
高度：46px；
显示器：flex；
}
#分类{
身高：20；
宽度：40；
}
#h1{
文本对齐：右对齐；
颜色：黑色；
字体大小：39px；
}
.按钮{
背景颜色：绿色；
边界：无；
边界半径：4px；
颜色：白色；
填充：2px32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：14px；
}
table.dataTable{
宽度：100%；
保证金：0自动；
明确：两者皆有；
边界塌陷：分离；
边界间距：0；
}
#看见{
宽度：160px；
高度：25px；
背景色：#E16A6A；
边界：无；
边界半径：4px；
颜色：黑色；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：14px；
}
#seen.hack{
背景颜色：绿色；
颜色：黑色；
}
table.dataTable thead th，table.dataTable tfoot th{
字体大小：粗体；
}
table.dataTable thead th，table.dataTable thead td{
边框底部：1px实心#111；
}
table.dataTable.display tbody tr.odd>.sorting_1，table.dataTable.order-column.stripe tbody tr.odd>.sorting_1{
背景色：#f1f1；
}
table.dataTable.no-footer{
边框底部：1px实心#111；
}
table.dataTable tbody th.dt-body-left，table.dataTable tbody td.dt-body-left{
文本对齐：左对齐；
}
table.dataTable tbody th.dt-body-center，table.dataTable tbody td.dt-body-center{
文本对齐：居中；
}
table.dataTable tbody th.dt-body-right，table.dataTable tbody td.dt-body-right{
文本对齐：右对齐；
}
table.dataTable tbody th.dt-body-justify，table.dataTable tbody td.dt-body-justify{
文本对齐：对齐；
}
表.dataTable tbody th.dt-body-nowrap，表.dataTable tbody td.dt-body-nowrap{
空白：nowrap；
}
/*搜索框*/
.dataTables\u包装器.dataTables\u长度{
浮动：左
}
.dataTables\u包装器.dataTables\u过滤器{
浮动：对；
文本对齐：右对齐；
}
.dataTables\u包装器.dataTables\u过滤器输入{
左边距：0.5em；
}
.dataTables\u包装器.dataTables\u信息{
明确：两者皆有；
浮动：左；
垫面：0.755em；
}
.dataTables_包装。dataTables_包装{
浮动：对；
文本对齐：右对齐；
垫面：0.25em；
}
.dataTables_包装器.dataTables_分页.分页按钮{
框大小：边框框；
显示：内联块；
最小宽度：1.5em；
填充物：0.5em 1em；
左边距：2倍；
文本对齐：居中；
文字装饰：无！重要；
光标：指针；
*光标：手；
颜色：#333！重要；
边框：1px实心透明；
}
.dataTables_wrapper.dataTables_paginate.paginate_button.current、.dataTables_wrapper.dataTables_paginate.paginate_button.current:悬停{
颜色：#333！重要；
边框：1px实心#cacaca；
背景色：#fff；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#fff）、颜色停止（100%，#DCDC））；
背景：-webkit线性梯度（顶部，#fff 0%，#DCDC 100%）；
背景：-moz线性梯度（顶部，#fff 0%，#DCDC 100%）；
背景：-ms线性梯度（顶部，fff 0%，DCDC 100%）；
背景：-o-线性梯度（顶部，#fff 0%，#DCDC 100%）；
背景：线性梯度（至底部，#fff 0%，#DCDC 100%）
}
.dataTables\u包装器.dataTables\u滚动div.dataTables\u滚动体{
*页边顶部：-1px；
-webkit溢出滚动：触摸
}
.dataTables\u wrapper.dataTables\u scroll div.dataTables\u scroll Body th>div.dataTables\u sizing.dataTables\u wrapper.dataTables\u scroll div.dataTables\u scroll Body td>div.dataTables\u sizing{
身高：0；
溢出：隐藏；
边距：0！重要；
填充：0！重要
}
.dataTables\u wrapper.no-footer.dataTables\u scrollBody{
边框底部：1px实心#111
}
.dataTables\u wrapper.no-footer div.dataTables\u scrollHead table、.dataTables\u wrapper.no-footer div.dataTables\u scrollBody table{
边框底部：无
}
.dataTables\u包装器：之后{
可见性：隐藏；
显示：块；
内容：“；
明确：两者皆有；
身高：0
}
@媒体屏幕和屏幕（最大宽度：767px）{
.dataTables\u wrapper.dataTables\u info、.dataTables\u wrapper.dataTables\u paginate{
浮动：无；
文本对齐：居中
}
.dataTables_包装。dataTables_包装{
边缘顶部：0.5em
}
}
@媒体屏幕和屏幕（最大宽度：640像素）{
.dataTables\u wrapper.dataTables\u length.dataTables\u wrapper.dataTables\u筛选器{
浮动：无；
文本对齐：居中
}
.dataTables\u包装器.dataTables\u过滤器{
边缘顶部：0.5em
}
}
.弹出窗口{
位置：绝对位置；
左：50%；
}
钮扣{
大纲：无；
光标：指针；
字号：500；
边界半径：4px；
边框：2倍实心透明；
过渡：背景0.1s线性，边框颜色0.1s线性，颜色0.1s线性；
}
.视图模式{
背景色：#1da4f1；
边界：无；
边界半径：4px；
颜色：白色；
填充：2x22px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：14px；
}
.弹出窗口{
背景：#fff；
填充：25px；
边界半径：15px；
前-150%；
最大宽度：380px；
宽度：100%；
不透明度：0；
指针事件：无；
盒影：0px 10px 15px rgba（0,0,0,0.1）；
转换：转换（-50%，-50%）比例（1.2）；
过渡：前0秒0.2秒缓进缓出，
不透明度0.2s 0s ea