javascript关闭按钮不起作用

时间:2016-12-23 06:41:17

标签: javascript html

我试图关闭我的模态,但它没有关闭。如果我单击按钮关闭模式,整个页面将重新加载。我怎样才能解决这个问题。

这是我的代码: -

  <button id="myBtn2">Read more</button>
  <span class="more"></span>

这里的型号: -

 <div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
  <span class="close">&times;</span>
  <img src="images/abcd.jpeg" style="width:300px;margin:5px; padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
  <img src="images/aaa.jpeg" style="width:300px;margin:5px;padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
  <img src="images/bbb.jpeg" style="width:300px;margin:5px;padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
  <img src="images/ccc.jpeg" style="width:300px;margin:5px;padding-bottom: 10px;border-radius: 20px;" alt="Web Design Trends" />
  </div>

  </div>

这是我的剧本: -

<script>
  var modal = document.getElementById('myModal2');
  var btn = document.getElementById("myBtn2");
  var span = document.getElementsByClassName("close")[0];
  btn.onclick = function() {
  modal.style.display = "block";
  }
  span.onclick = function() {
  modal.style.display = "none";
  }
  window.onclick = function(event) {
  if (event.target == modal) {
  modal.style.display = "none";
  }
  }
  </script> 

请帮助我谢谢

1 个答案:

答案 0 :(得分:1)

尝试运行此.. ..

&#13;
&#13;
<prop key="hibernate.hbm2ddl.auto">update/validate</prop>
&#13;
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <include resource="org/springframework/boot/logging/logback/base.xml" />

  <appender name="amqp" class="org.springframework.amqp.rabbit.logback.AmqpAppender">
    <host>localhost</host>
    <port>5672</port>
    <virtualHost>/</virtualHost>
    <username>guest</username>
    <password>guest</password>
    <exchangeType>topic</exchangeType>
    <exchangeName>demo.log</exchangeName>
    <applicationId>demo</applicationId>
    <routingKeyPattern>test</routingKeyPattern>
    <contentType>text/plain</contentType>
    <maxSenderRetries>2</maxSenderRetries>
  </appender> 

  <logger name="com.example" level="DEBUG">
    <appender-ref ref="amqp"/>
  </logger>

</configuration>
&#13;
var modal = document.getElementById('myModal2');
var btn = document.getElementById("myBtn2");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
&#13;
&#13;
&#13;