Question

I have a div as custom popup

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

which is hidden by default. what i want to do is show the div when someone clicks on this link

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

is it possible to pass the div ID/Class in href link and load the div without using JQuery/Javascript.

here is the css part too if you need.

/** CSS for Delete Popup**/

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

＆＃13;

#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;
    }

＆＃13;

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

＆＃13;

我希望这会奏效：）

Answer 2

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

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

希望这会对你有所帮助

Answer 3

试试这个

＆＃13;

function displayPopup(){
  
  document.getElementsByClassName('deletePopup')[0].style.display = 'block';
}

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

Answer 4

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

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

也许这有效，只是JS，而不是jQuery：

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

使用<a> tag

5 个答案: