Javascript在HTML上创建按钮和触发onclick函数

我面临一个问题，javascript负责创建按钮，然后在HTML（弹出框）上显示它

一旦它被创建，我希望用户可以自由点击一个按钮来关闭它。 解决方法是设置

modal.style.style=display

在HTML中：

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

  <!-- Modal content -->
  <div class="modal-content">
  <div class='modal-header'>
  <span class='close'>&times;</span>
<div id ="sub" >

  </div>

</div>

当它显示在HTML上时，我想触发一个onclick函数来关闭这个模式框。 因为一切都是由javascript创建的，所以我认为问题在于它不会触发任何行

我尝试创建一个onclick函数来触发

var modal = document.getElementById('myModal');
    function clear(){

        modal.style.display = "none";

    }

我也试过了

var modal = document.getElementById('myModal');
    var vicious = document.getElementById("vicious");

    vicious.onclick = function() {

        modal.style.display = "none";

    }

我不知道，有人能指引我吗？ 提前谢谢

---

JSBIN:

您可以尝试类似的方法：

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

    <!-- Modal content -->
    <div class="modal-content">
        <div class='modal-header'>
            <span class='close' onclick="close()">&times;</span>
            <div id="sub">

            </div>

        </div>

    </div>
</div>

<script>
    function close(){
        document.getElementById('myModal').style.display = 'none';
    }
</script>

&时代；
函数关闭（）{
document.getElementById（'myModal'）.style.display='none'；
}

您需要在函数内移动选择器：

function clear() {
    var modal = document.getElementById('myModal');
    modal.style.display = "none";
}

编辑：使用第二种技术：

div.innerHTML = ...;
var vicious = document.getElementById("vicious");
vicious.onclick = clear;

---

在使用jQuery时，可以按照以下步骤实现模态的隐藏

删除click事件的绑定，

onclick='clear（）'

。这是不必要的

使用将侦听器绑定到id为的元素

$('#vicious').click(function() {
    $('#myModal').modal('hide');
});

或者尝试以下方法

$("#vicious").on("click", function(e){
     $("#modal").modal("hide");
     e.stopPropagation();
});

阻止事件冒泡

如果您想使用vanilla javaScript onlt，那么在设置内部html后，请包含以下代码

var btn = document.getElementById("vicious");
btn.onclick = function() {
    alert();
    modal.style.display = "none";
}

---

我看不到在任何地方使用

myModal

！检查您是否正确设置了modal div的id。@SudhansuChoudhary，请稍候，让我粘贴完整代码。@SudhansuChoudhary，我已经更新了，谢谢。使用innerHTML绑定事件。。在你使用jQuery的过程中，生活是如此的悲伤？它不起作用，我需要给image一个特定的id来关闭它，而不是跨距。如果你想关闭模态，你不需要img的id，只需在你的img中添加：

onclick=“close（）”

。在我的帖子中添加一个jsbin来了解更多信息。你现在失去了我，也许我不明白你想做什么。为什么要使用输入关闭模式？运气不好，因为innerhtml无法绑定事件。我在html页面中添加了这一点也不走运，因为我的javascript是独立的。在javascript文件中添加您单独保存的代码片段添加一个jsbin，如果您单击顶部的小x按钮，它将清除所有内容，但没有图像的提交按钮不会这样做，这是我的问题。好的。。我想一下。。。。虽然我没有看到您使用我提供的代码。这是原始代码，但我已尝试将您的代码放在innerhtml的下方，单击按钮不会触发任何内容。第二种方法不起作用，通过使用

×，同时告诉我我的jsbin是否为您工作
var btn = document.getElementById("vicious");
btn.onclick = function() {
    alert();
    modal.style.display = "none";
}