Javascript 使用<；将隐藏div加载为弹出窗口；a>；标签

我有一个div作为自定义弹出窗口

<div class="deletePopup">
   <header class="popupHeader">Confirm Delete!!!
      <a href="#" class="cancelButton" data-toggle="tooltip" title="Cancel" onclick="closePopup();"><span class="glyphicon glyphicon-remove"></span></a>
   </header>
   <section class="popupContent">
      <p class="deleteMessage">Are you Sure You want to delete this Timecard?</p>
   </section>
   <footer class="popupFooter">
      <span>
          <button id="okDelete" type="submit" class="btn btn-info btn-sm deletebuttons" data-toggle="tooltip" title="Delete" onclick="okDelete();">
             Delete
          </button>
      </span>
   </footer>
</div>

---

可以使用onclick事件更改样式。显然，您需要jquery来实现这一点

<a href="#" onclick="$('.deletePopup').css('display', 'block')">Click Me<a>

点击我

---

如果您不能使用Javascript，希望这将对您有所帮助。 也许此线程可以帮助您：

也许这是可行的，只是JS，而不是jQuery：

document.getElementById('a_x200').style.visibility = 'visible';

试试这个

函数displayPopup（）{
document.getElementsByClassName（'deletePopup'）[0].style.display='block'；
}

.deletePopup{
显示：无；
位置：固定；
z指数：10；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
Popader先生{
保证金：自动；
背景色：#37d4ff；
颜色：白色；
宽度：300px；
垫面：5px；
垫底：5px；
边界半径：10px 10px 0px 0px；
文本对齐：居中；
字体大小：粗体；
}
.popupContent{
背景色：#F8；
保证金：自动；
填充：20px；
宽度：300px；
高度：80px；
字体大小：粗体；
字体系列：草书；
}
.popupFooter{
保证金：自动；
背景色：#F8；
宽度：300px；
高度：50px；
边界半径：0px 0px 10px 10px；
文本对齐：居中；
}
.删除按钮{
颜色：白色；
}
.取消按钮{
位置：固定；
顶部：88px；
左边距：79px；
背景色：#37d4ff；
浮动：对；
高度：25px；
宽度：25px；
右边距：10px；
边框：2px实心#37d4ff；
边界半径：13px；
z指数：10；
颜色：白色；
}
.取消按钮：悬停{
颜色：白色；
}
.取消按钮跨度{
边缘顶部：2倍；
}
.deleteMessage{
文本对齐：居中；
}

您确定要删除此时间卡吗
删除

在标签中添加弹出窗口的id名称并添加以下css

#弹出窗口{
显示：无；
}
#弹出：目标{
显示：块；
}
.deletePopup{
显示：无；
位置：固定；
z指数：10；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
Popader先生{
保证金：自动；
背景色：#37d4ff；
颜色：白色；
宽度：300px；
垫面：5px；
垫底：5px；
边界半径：10px 10px 0px 0px；
文本对齐：居中；
字体大小：粗体；
}
.popupContent{
背景色：#F8；
保证金：自动；
填充：20px；
宽度：300px；
高度：80px；
字体大小：粗体；
字体系列：草书；
}
.popupFooter{
保证金：自动；
背景色：#F8；
宽度：300px；
高度：50px；
边界半径：0px 0px 10px 10px；
文本对齐：居中；
}
.删除按钮{
颜色：白色；
}
.取消按钮{
位置：固定；
顶部：88px；
左边距：79px；
背景色：#37d4ff；
浮动：对；
高度：25px；
宽度：25px；
右边距：10px；
边框：2px实心#37d4ff；
边界半径：13px；
z指数：10；
颜色：白色；
}
.取消按钮：悬停{
颜色：白色；
}
.取消按钮跨度{
边缘顶部：2倍；
}
.deleteMessage{
文本对齐：居中；
}

您确定要删除此时间卡吗
删除

这可以使用CSS来完成

HTML:

<div id="deletePopup">
<header class="popupHeader">Confirm Delete!!!
    <a href="#" class="cancelButton" data-toggle="tooltip" title="Cancel" onclick="closePopup();"><span class="glyphicon glyphicon-remove"></span></a>
</header>
<section class="popupContent">
    <p class="deleteMessage">Are you Sure You want to delete this Timecard?</p>

</section>
<footer class="popupFooter">
    <span>
        <button id="okDelete" type="submit" class="btn btn-info btn-sm deletebuttons" data-toggle="tooltip" title="Delete" onclick="okDelete();">Delete</button>
    </span>
</footer>
</div>

<a href="#deletePopup"> click to show</a>

---

不，没有JQuery/Javascript，您无法做到这一点。添加一个类的最低限度需要一点Javascript，到目前为止，你是唯一一个修复了：-）问题是我根本不想使用js进行加载。无论如何，谢谢你的时间：）@AnkurSahu如果它对你有用，就把它标记为正确答案，这样其他人也会从中受益。

document.getElementById('a_x200').style.visibility = 'visible';

<div id="deletePopup">
<header class="popupHeader">Confirm Delete!!!
    <a href="#" class="cancelButton" data-toggle="tooltip" title="Cancel" onclick="closePopup();"><span class="glyphicon glyphicon-remove"></span></a>
</header>
<section class="popupContent">
    <p class="deleteMessage">Are you Sure You want to delete this Timecard?</p>

</section>
<footer class="popupFooter">
    <span>
        <button id="okDelete" type="submit" class="btn btn-info btn-sm deletebuttons" data-toggle="tooltip" title="Delete" onclick="okDelete();">Delete</button>
    </span>
</footer>
</div>

<a href="#deletePopup"> click to show</a>

#deletePopup{
  display: none;
}

#deletePopup:target {
    display: block;
}