添加關閉按鈕div來關閉拳擊

Question

這裏是我的JSFiddle

預覽在格框中顯示。我想在右上角添加關閉選項。如何做到這一點，以便當用戶點擊它框應被禁用。

代碼段

.duyurular { 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    border-radius: 4px; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 
    color: #212121; 
 
    height: 42px; 
 
    line-height: 42px; 
 
    padding: 0 16px; 
 
} 
 
.duyurular > i { 
 
    background-color: #27ae60; 
 
    border-radius: 4px 0 0 4px; 
 
    color: #fff; 
 
    float: left; 
 
    font-size: 16px; 
 
    height: 42px; 
 
    line-height: 42px; 
 
    margin: 0 16px 0 -16px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    width: 42px; 
 
} 
 
.otomesaj { 
 
    float: left; 
 
    font-family: "Exo 2",sans-serif; 
 
    font-size: 13px; 
 
    margin: 1px auto 0; 
 
    padding: 0 5px; 
 
    width: 680px; 
 
} 
 
.otomesaj ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.duyurus { 
 
    color: #212121; 
 
    display: none; 
 
    list-style: outside none none; 
 
    text-align: left; 
 
}

<div class="duyurular" original-title=""> 
 
<i class="fa fa-bullhorn" original-title=""></i> 
 
<div class="otomesaj" original-title=""> 
 
\t <ul> 
 
     <li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li> 
 
\t \t <li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li> 
 
     <li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li> 
 
\t </ul> 
 
</div> 
 
</div>

Answer 1

試試這個代碼，這可能會幫助你

$(document).ready(function(){ 
 
    $('.right').click(function(){ 
 
     $(this).parent().hide('slow'); 
 
    }) 
 
})

.duyurular { 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    border-radius: 4px; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 
    color: #212121; 
 
    height: 42px; 
 
    line-height: 42px; 
 
    padding: 0 16px; 
 
} 
 
.duyurular > i { 
 
    background-color: #27ae60; 
 
    border-radius: 4px 0 0 4px; 
 
    color: #fff; 
 
    float: left; 
 
    font-size: 16px; 
 
    height: 42px; 
 
    line-height: 42px; 
 
    margin: 0 16px 0 -16px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    width: 42px; 
 
} 
 
.otomesaj { 
 
    float: left; 
 
    font-family: "Exo 2",sans-serif; 
 
    font-size: 13px; 
 
    margin: 1px auto 0; 
 
    padding: 0 5px; 
 
    width: 680px; 
 
} 
 
.otomesaj ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.duyurus { 
 
    color: #212121; 
 
    display: none; 
 
    list-style: outside none none; 
 
    text-align: left; 
 
} 
 
.right{ 
 
    position:relative; 
 
    text-align:right; 
 
left:350px; 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="duyurular" original-title=""> 
 
<i class="fa fa-bullhorn" original-title="">s</i> 
 
<div class="otomesaj" original-title=""> 
 
\t <ul> 
 
     <li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li> 
 
\t \t <li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li> 
 
     <li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
    <button class="right">x</button> 
 
</div>

Answer 2

你應該給一個ID，你的DIV並在這裏添加onlcick事件我給ID myDiv

var myDiv = document.getElementById("myDiv"); 
myDiv.onclick = function() { myDiv.style.display = 'none'; }; 

這裏fiddle

Answer 3

我更新了小提琴:)

http://jsfiddle.net/djxnznen/3/

http://jsfiddle.net/djxnznen/4/

$(document).ready(function(){ 
 
    $('.right').click(function(){ 
 
     $(this).parent().hide('slow'); 
 
    }) 
 
})

.duyurular { 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    border-radius: 4px; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 
    color: #212121; 
 
    height: 42px; 
 
    line-height: 42px; 
 
    padding: 0 16px; 
 
} 
 
.duyurular > i { 
 
    background-color: #27ae60; 
 
    border-radius: 4px 0 0 4px; 
 
    color: #fff; 
 
    float: left; 
 
    font-size: 16px; 
 
    height: 42px; 
 
    line-height: 42px; 
 
    margin: 0 16px 0 -16px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    width: 42px; 
 
} 
 
.otomesaj { 
 
    float: left; 
 
    font-family: "Exo 2",sans-serif; 
 
    font-size: 13px; 
 
    margin: 1px auto 0; 
 
    padding: 0 5px; 
 
    width: 680px; 
 
} 
 
.otomesaj ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.duyurus { 
 
    color: #212121; 
 
    display: none; 
 
    list-style: outside none none; 
 
    text-align: left; 
 
} 
 
.right{ 
 
    position:relative; 
 
    text-align:right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="duyurular" original-title=""> 
 
<i class="fa fa-bullhorn" original-title="">s</i> 
 
<div class="otomesaj" original-title=""> 
 
\t <ul> 
 
     <li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li> 
 
\t \t <li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li> 
 
     <li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
    <div class="right">x</div> 
 
</div>

他們都是一樣的，但我的鼠標恨我（我點擊1次和他執行點擊風暴......）。

Answer 4

用這種方式添加它。

<style> 
#preview { 
height: 70%; 
width: 70%; 
position: fixed; 
z-index: 1; 
top:30; 
left: 20; 
background-color: #ff00ff; 
overflow-x: hidden; 
padding-top: 60px; 
} 
    .closebtn { 
position: absolute; 
top: 0; 
right: 25px; 
font-size: 36px !important; 
margin-left: 50px; 
} 

</style> 
<body> 
<div id="preview"> 
    <a href="javascript:void(0)" class="closebtn" 
    onclick="closePreview()">x</a> 
    <p style="text-align:center" >Your Content</p> 
    </div> 
<script> 
function closePreview(){ 
var btn = document. getElementById("preview"); 
btn.style.display="none" 
} 
</script> 
</body>