关闭按钮不起作用

>我已经在div 中放置了关闭按钮，但它不起作用？我应该保留显示：无;但是当我删除显示时，它可以工作！

 function myFun() {
    var button  = document.getElementById("myBtn");
    button.onclick = function() {
    var div = document.getElementById('title');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }

};
  </script>
</head>
<body>
  <div id="title" style=" display:none; font-family: Helvetica, Arial, sans-serif; margin-left:auto; margin-right:auto; position:absolute; top: 50px; right: 16px; padding: 30px; z-index:10; width:290px; height:500px; box-sizing: border-box;  background-color:#fcfcfc ; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); text-align:center; float:center;"><input type="button" id="myBtn" onclick="myFun()" value="close" style= "bottom: 2px; right: 60px; margin: 1px 200px;"></div>

您应该删除visibility:hidden。
因此，您将获得所需的内容，因为div将与您的按钮一起出现，而不会visibility:hidden。

它的工作好兄弟。你只需要删除~~可见性：隐藏~~

function myFun() {
    var x = document.getElementById("myBtn").value;
    document.getElementById("title").innerHTML = x;
    alert(x);
}

#title{
    background-color: #fcfcfc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    font-family: Helvetica,Arial,sans-serif;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    position: absolute;
    right: 16px;
    text-align: center;
    top: 50px;
    width: 290px;
    z-index: 10;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="title">
 <input type="button" id="myBtn" onclick="myFun()" value="close"></div>
 </body>

相关内容

最新更新

热门标签：