使用 <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>

我希望这会奏效:)

Answer 2

试试这个

function displayPopup(){
  
  document.getElementsByClassName('deletePopup')[0].style.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="#" onclick="displayPopup()">Click Me<a>

<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>

Answer 3

这可以使用 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>

CSS：

#deletePopup{
  display: none;
}

#deletePopup:target {
    display: block;
}

Working CodePen Link

Answer 4

您可以使用 onclick 事件来更改样式。显然你需要 jquery。

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

希望对你有帮助

Answer 5

如果你不能使用Javascript。 也许这个线程可以帮助你： Show / hide div on click with CSS

也许这行得通，只是 JS，而不是 jQuery：

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