javascript - 使用 <a> 标签将隐藏的 div 作为 Popup 加载

Question

我有一个 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>

默认隐藏。 我想要做的是在有人点击此链接时显示 div

<a href="#">Click Me<a>

是否可以在 href 链接中传递 div ID/Class 并在不使用 JQuery/Javascript 的情况下加载 div。

如果您需要，这里也有 css 部分。

/** 用于删除弹出窗口的 CSS**/

.deletePopup {
    display: none;
    position: fixed;
    z-index: 10;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}


.popupHeader{
    margin: auto;
    background-color: #37d4ff;
    color: white;
    width:300px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px 10px 0px 0px;
    text-align: center;
    font-weight: bolder;
}
.popupContent {
    background-color: #f8f8f8;
    margin: auto;
    padding: 20px;
    width: 300px;
    height: 80px;
    font-weight: bold;
    font-family: cursive;
}

.popupFooter{
    margin: auto;
    background-color: #f8f8f8;
    width: 300px;
    height: 50px;
    border-radius: 0px 0px 10px 10px;
    text-align: center;
}

.deletebuttons {
    color: white;
}


.cancelButton{
    position: fixed;
    top:88px;
    margin-left: 79px;
    background-color: #37d4ff;
    float: right;
    height: 25px;
    width:25px;
    margin-right: 10px;
    border:2px solid #37d4ff;
    border-radius: 13px;
    z-index: 10;
    color: white;
}
.cancelButton:hover {
    color: white;
}
.cancelButton span{
    margin-top: 2px;
}

.deleteMessage{
    text-align: center;
    }

Answer 1

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

#popup {
    display: none;
}

#popup:target {
    display: block;
}

.deletePopup {
    display: none;
    position: fixed;
    z-index: 10;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}


.popupHeader{
    margin: auto;
    background-color: #37d4ff;
    color: white;
    width:300px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px 10px 0px 0px;
    text-align: center;
    font-weight: bolder;
}
.popupContent {
    background-color: #f8f8f8;
    margin: auto;
    padding: 20px;
    width: 300px;
    height: 80px;
    font-weight: bold;
    font-family: cursive;
}

.popupFooter{
    margin: auto;
    background-color: #f8f8f8;
    width: 300px;
    height: 50px;
    border-radius: 0px 0px 10px 10px;
    text-align: center;
}

.deletebuttons {
    color: white;
}


.cancelButton{
    position: fixed;
    top:88px;
    margin-left: 79px;
    background-color: #37d4ff;
    float: right;
    height: 25px;
    width:25px;
    margin-right: 10px;
    border:2px solid #37d4ff;
    border-radius: 13px;
    z-index: 10;
    color: white;
}
.cancelButton:hover {
    color: white;
}
.cancelButton span{
    margin-top: 2px;
}

.deleteMessage{
    text-align: center;
    }

<a href="#popup">Click Me<a>
  
  
  <div id="popup" 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>

我希望这会奏效:)