1. 首頁
  2. 問答
  3. 加載隱藏的div作爲使用<a>標籤

加載隱藏的div作爲使用<a>標籤

2017-02-15 64 views
3

彈出我有一個div作爲自定義彈出加載隱藏的div作爲使用<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>

這是默認隱藏。 我想要做的是顯示DIV當有人點擊此鏈接

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

上是有可能通過DIV ID /類的HREF鏈接，並加載DIV不使用JQuery/JavaScript的。

如果你需要的話，這裏也是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; 
    }

來源

2017-02-15 Ankur Sahu

+0

不，你不能沒有JQuery的/ JavaScript的做到這一點。 –

+0

你不能。添加一個類的最低限度需要一點點javascript –

回答

3

在標籤添加彈出的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>

我希望這將工作:)

來源

2017-02-15 08:10:58

+0

它的工作謝謝.... –

+0

@AnkurSahu標記爲正確的答案，如果它爲你工作，使其他人也將受益於同樣的。 –

1

可以使用onclick事件來改變風格。顯然你需要爲此查詢jquery。

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

希望這將幫助你

來源

2017-02-15 07:57:28 jithya

0

如果你不能使用JavaScript。 也許這線程可以幫助您： Show/hide div on click with CSS

也許這個作品，就是JS，不是jQuery的：

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

來源

2017-02-15 07:57:48 fGeyer

1

試試這個

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>

來源

2017-02-15 08:03:55

+0

事情是我不想使用js來加載。非常感謝您的時間:) –

1

這可以通過使用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

來源

2017-02-15 08:13:03 amansoni211

+0

到目前爲止，您是唯一固定 :-)的人 – kdev

相關問題

 相關問題