Loading hidden div as Popup using tag

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

You can't. The bare minimum of adding a class would require a little javascript — Prasun Jajodia, Feb 15 '17 at 07:55

score 3 · Accepted Answer · answered Feb 15 '17 at 08:10

In a tag add the id name of the popup and add the below 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>

I hope this will work :)

@AnkurSahu Mark it as right answer if it worked for you, so that others will also be benefited from the same. — Akshay Kumar, Feb 15 '17 at 08:43

score 1 · Answer 2 · answered Feb 15 '17 at 08:03

Try this

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>

the thing is i dont want to use js at all for loading. Thanks anyway for your time :) — Ankur Sahu, Feb 15 '17 at 08:41

score 1 · Answer 3 · answered Feb 15 '17 at 08:13

This can be done using 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

So far you are the only one who fixed the :-) – kdev Feb 15 '17 at 08:15 — kdev, Feb 15 '17 at 08:15

score 0 · Answer 4 · answered Feb 15 '17 at 07:57

0

you can use onclick event to change the style. obviously you need jquery for this.

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

hope this will help you

answered Feb 15 '17 at 07:57

jithya

428
4
13

score 0 · Answer 5 · edited May 23 '17 at 12:31

0

If you can not use Javascript. Maybe this thread can help you: Show / hide div on click with CSS

And maybe this works, is just JS, not jQuery:

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

edited May 23 '17 at 12:31

Community

1
1

answered Feb 15 '17 at 07:57

Eskaaa

69
6

Loading hidden div as Popup using tag

5 Answers5