Question

这是我的JSFiddle

预览显示在div框中。我想在右上角添加关闭选项。怎么办才能在用户点击它时禁用它。

代码段

.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="">
	<ul>
         <li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
		<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>
	</ul>
</div>
</div>

Answer 1

我更新了你的小提琴：）

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="">
	<ul>
        <li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
		<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>
			</ul>
		</div>
   <div class="right">x</div>
</div>

他们都是一样的，但是我的老鼠讨厌我（我点击一次，他点击风暴......）。

Answer 2

以这种方式添加。

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

Answer 3

试试这段代码，这可能会对你有所帮助

$(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="">
	<ul>
        <li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
		<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>
			</ul>
		</div>
   <button class="right">x</button>
</div>

Answer 4

你应该给你的div一个id并在其上添加一个onlcick事件，我给了我的id myDiv

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

这里是fiddle

添加关闭按钮div以关闭拳击

4 个答案: