js出现div的代码,js控制div显示

更新：<time datetime="2022-11-20 22:47">2022-11-20 22:47</time>

本文目录一览：

1、如何js弹出div
2、js显示和隐藏div如何修改
3、点击按钮弹出一个div，再点击按钮或点击其他区域关闭该div，javascript代码如何实现？

如何js弹出div

js如下:

//登陆弹出对话框，并使背景元素不可用
var div_width = 300;
var div_height = 200;
function showWindow(width, height) {
    location.href = "#";
    width = div_width;
    height = div_height;
    var windowstr = document.getElementById("popLayer").innerHTML;
    document.getElementById("infoDiv").innerHTML = windowstr;
    document.getElementById("infoDiv").style.left = ((document.body.clientWidth - width) > 0 ? (document.body.clientWidth - width) : 0) / 2 + "px";
    document.getElementById("infoDiv").style.top = 200 + "px";
    document.getElementById("infoDiv").style.zIndex = 10001;
    document.getElementById("infoDiv").style.width = width;
    document.getElementById("infoDiv").style.height = height;
    document.getElementById("infoDiv").style.border = "3px solid #0099ff";
    document.getElementById("tranDiv").style.height = document.body.clientHeight + "px";
    document.getElementById("tranDiv").style.width = document.body.clientWidth + "px";
    document.getElementById("tranDiv").style.display = "";
    document.getElementById("tranDivBack").style.display = "";
    document.getElementById("tranDivBack").style.zIndex = 10000;
    document.getElementById("infoDiv").style.display = "";
}
function closeWindow() {
    document.getElementById("tranDiv").style.display = "none";
}

页面中：

<!--层遮罩部分-->
<div style="position:absolute;display:none; left:0px; top:0px;" id="tranDiv">
    <div style="position:absolute;left:0px; top:0px; width:100%; height:100%;background-color:#000000;filter:alpha(Opacity=30)" id="tranDivBack"></div>
    <div align='center' style='position:absolute;left:0px; top:0px; width:100%; height:100%; background-color:#e5edf5;background-image:url(images/bestnetqywimg/tccbg.gif);' id='infoDiv'></div>
</div>
<!--层遮罩部分结束-->
<!--弹出层登录-->
<div id="popLayer" style="display:none">
    <form id="formdl" name="formdl" method="post" action="">
        <br />
        <font align="center" color="#0000ff" size="3"><b>---手机号码先登录---</b></font><br /><br />
        <br />
        <input type="submit" name="Submit" class="bntccanniu" value="登录" /> 
        <input type="button" name="Submit1" class="bntccanniu" value="取消" onclick="closeWindow();" />
    </form>
</div>
<!--弹出层登录结束-->
<a href="javascript:;" onclick="showWindow()">点击此处看看</a>

js显示和隐藏div如何修改

需要准备的材料分别有：电脑、html编辑器、浏览器。 1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。 2、在index.html中的script标签，输入js代码：$('button').click(function () {$('#123').css('display', 'block');});。 3、浏览器运行index.html页面，此时点击btn按钮后，div的内容成功被显示了出来。

点击按钮弹出一个div，再点击按钮或点击其他区域关闭该div，javascript代码如何实现？

var 按钮 = document...;
var div = document...;
// 点击按钮弹出div 在点击按钮关闭该div
按钮.onclick = function () {
    if (div.style.display == "none") {
        div.style.display = "block";
    } else {
        div.style.display = "none";
    }
}
// 点击其他地方关闭div
document.onclick = function () {
    div.style.display = "none";
}
// 为了防止点击div 也关闭div 所以这里要防止冒泡
div.onclick = function () {
    return false;
}