Question

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

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

在HTML中：

modal.style.style=display

我有一个函数在获取成功变量时创建一个模态框，我将附加到id <div id="myModal" class="modal">  <div class="modal-content"> <div class='modal-header'> <span class='close'>×</span> <div id ="sub" > </div> </div>。

sub

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

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

div.innerHTML = 
"<div id=''><span class='close'><input type='image' id='vicious' onclick='clear()' style='width:100%;' border='0' src='images/DUK.png' ></span></div>"

我也试过

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

        modal.style.display = "none";

    }

我不明白，有人可以指导我吗？提前谢谢。

JSBIN：http://jsbin.com/rusapudodo/edit?html,js,output

Answer 1

当您使用jQuery时，您可以按照以下步骤隐藏模态

删除点击事件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";
}

Answer 2

你可以尝试这样的事情：

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

Answer 3

您需要在功能内移动选择器：

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

编辑：使用您的第二个技术：

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

Javascript创建按钮并触发HTML上的onclick功能

3 个答案: