Добавить кнопку закрытия 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

вы должны дать идентификатор для вашего DIV и добавить onlcick событие на нем здесь я дал идентификатор 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>