单击按钮时，元素不会显示

时间：2017-06-23 14:34:59

标签： jquery html css

元素没有在按钮点击上显示。

＆＃13;
＆＃13; 
var modal = document.getElementById('comments-main');
var btn = $("a#comments-btn");
var span = $("close");
btn.click = function() {
  if (modal.style.display == 'block') {
    modal.style.display = "none";
  } else {
    modal.style.display = "block";
  }
}
span.onclick = function() {
  if (modal.style.display == 'block') {
    modal.style.display = "none";
  }
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
＆＃13; 
#comments-btn {
  float: left;
  margin-left: 50px;
}

.comments-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s;
}

.comments-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
}

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

.comments-header {
  padding: 2px 16px;
  background-color: orange;
  /* #5cb85c */
  color: white;
  font-size: 15px;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
  border-top: 1.5px solid black;
  border-bottom: 1.5px solid black;
  border-radius: 1px;
  text-shadow: -1px 3px 3px white, 3px 4px 5px red, 6px 9px 12px black;
}

.comments-body {
  padding: 2px 16px;
  font-size: 15px;
  font-style: italic;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
  border-radius: 1px;
}

.comments-modal-footer {
  padding: 2px 16px;
  background-color: orange;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
  border-bottom: 1.5px solid black;
  border-radius: 1px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="comments-main" class="comments-modal">
  <div class="comments-content">
    <div class="comments-header">
      <span class="close">&times;</span>
      <h2> Shikor - FB Comments </h2>
    </div>
    <div class="comments-body">
      <p>Facebook Comments Count: <span class="fb-comments-count" data-href="http://br-gaming.tk"></span></p><br />
      <center>
        <div class="fb-comments" data-href="http://br-gaming.tk" data-width="600" data-numposts="5" data-colorscheme="dark"></div>
      </center>
    </div>
    <div class="comments-modal-footer"></div>
  </div>
</div>

<a class="w3-button w3-xlarge w3-circle w3-orange w3-card-4" id="comments-btn" href="#" onclick="return false;"><i class="fa fa-comments-o" aria-hidden="true"></i>Click here</a>
＆＃13;
＆＃13;
＆＃13;

点击按钮，它不会显示任何内容。

2 个答案:

答案 0 :(得分：0)

更改此点击事件 btn.click = function() { //do sth }

到

btn.on("click", function() { //do sth });

答案 1 :(得分：0)

您需要将功能从btn.click = function() {...}更改为btn.click(function() {...});。

var modal = document.getElementById('comments-main');
var btn = $("a#comments-btn");
var span = $(".close");
btn.click(function() {
  if (modal.style.display == 'block') {
    modal.style.display = "none";
  } else {
    modal.style.display = "block";
  }
});
span.click(function() {
  if (modal.style.display == 'block') {
    modal.style.display = "none";
  }
});
#comments-btn {
  float: left;
  margin-left: 50px;
}

.comments-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s;
}

.comments-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
}

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

.comments-header {
  padding: 2px 16px;
  background-color: orange;
  /* #5cb85c */
  color: white;
  font-size: 15px;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
  border-top: 1.5px solid black;
  border-bottom: 1.5px solid black;
  border-radius: 1px;
  text-shadow: -1px 3px 3px white, 3px 4px 5px red, 6px 9px 12px black;
}

.comments-body {
  padding: 2px 16px;
  font-size: 15px;
  font-style: italic;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
  border-radius: 1px;
}

.comments-modal-footer {
  padding: 2px 16px;
  background-color: orange;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
  border-bottom: 1.5px solid black;
  border-radius: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="comments-main" class="comments-modal">
  <div class="comments-content">
    <div class="comments-header">
      <span class="close">&times;</span>
      <h2> Shikor - FB Comments </h2>
    </div>
    <div class="comments-body">
      <p>Facebook Comments Count: <span class="fb-comments-count" data-href="http://br-gaming.tk"></span></p><br />
      <center>
        <div class="fb-comments" data-href="http://br-gaming.tk" data-width="600" data-numposts="5" data-colorscheme="dark"></div>
      </center>
    </div>
    <div class="comments-modal-footer"></div>
  </div>
</div>

<a class="w3-button w3-xlarge w3-circle w3-orange w3-card-4" id="comments-btn" href="#" onclick="return false;"><i class="fa fa-comments-o" aria-hidden="true"></i>button</a>

相关问题
最新问题