js动态添加div

一：添加div样式

.popDivTypeContent {
	width: 450px;
	height: 260px;
	background-color: #e3e4e9;
	display: block;
	position: absolute;
	margin: -100px 200px 200px 200px;
	z-index: 1;
	padding-left: 20px;
}

div的样式一般放到css文件中，或者定义在header中。这样样式才能正常显示。

二：创建div和添加删除

        //动态生成div弹框容器
        let cont = document.createElement('div');
        cont.setAttribute('id','popDivArticle')
        cont.setAttribute('class','popDivTypeContentArticle');
        let scrollTop = $(document).scrollTop();
        cont.style.marginTop = scrollTop + "px"//动态修改css样式属性
        let shutupLink = document.createElement('a');
        shutupLink.setAttribute('onclick','document.getElementById("popDivArticle").parentNode.removeChild(document.getElementById("popDivArticle"))')//删除div
        shutupLink.text = "关闭"
        cont.appendChild(shutupLink)
        cont.appendChild(document.createElement('br'))
         //提交按钮
        let submitButton = document.createElement('input');
        submitButton.setAttribute('type','button');
        submitButton.setAttribute('value','提交')
        document.getElement('parenDiv').appendChild(cont)//添加div

上面就是基本操作，当然有事div中的dom操作比较麻烦，这边附一张dom操作图。注意在创建出来的div中，我们就已经获取到了div的这个node值，后面的所有操作，属性的替换和操作的设置都把它当做一个普通的dom节点来操作即可。

四：div随屏幕滚动

<div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv">

</div>
<div class="div1">层1</div>
<div class="div2">层2</div>

<style type="text/css">
	.div1 {
		background-color: #FF0000;
		width: 2000px;
		height: 2000px;
	}
	
	.div2 {
		background-color: #33FF66;
		width: 100px;
		height: 100px;
		position: fixed;
		left: 50px;
		top: 50px;
	}
</style>

<script>

（1）对文档、屏幕、层的一些jquery基本操作

var showAdminUser = function (obj) {
        var offSet = $(obj).offset();
        var docTop = offSet.top;    //当前元素相对文档top偏移位置
        var docLeft = offSet.left;  //当前元素相对文档left偏移位置

        var docWidth = $(document).width(); //整个页面文档的宽度
        var docHeight = $(document).height();   //整个页面文档的高度
        var dScrollTop = $(document).scrollTop(); //整个文档滚动条相对top位置
        var wScrollTop = $(window).scrollTop(); //整个屏幕滚动条相对top位置
        var winWidth = $(window).width(); //整个屏幕宽度
        var winHeight = $(window).height();//整个屏幕高度

        alert("docWidth: " + docWidth + "——" + "docHeight:" + docHeight + " dScrollTop:" + dScrollTop);

        var dWidth = document.body.offsetWidth;  //纯javascript整个页面文档的宽度
        var hHeight = document.body.offsetHeight;   //纯javascript整个页面文档的高度
        var scrollTop = document.body.scrollTop + document.documentElement.scrollTop
        alert(" docWidth: " + dWidth + " docHeight: " + hHeight + " : " + scrollTop);

    }

(2)层伴随滚动条

$(document).ready(function() {       
	$(window).scroll(function() {           
		var scrollTop = $(document).scrollTop(); //htm文档滚动对象距离顶部位置
		//alert(scrollTop);
		           
		var AdminUserStateDiv = $("#AdminUserStateDiv");           
		//AdminUserStateDiv.css("top", scrollTop + "px");
		           
		AdminUserStateDiv.animate({
			"top": scrollTop + "px"
		}, 0);  //层伴随滚动条滚动，时时改变层对顶部的距离
		//$("#scrollUl").animate({ "marginLeft": scrollposition + "px" }, 10); 
	})
});

（3）遮罩层和加载图片效果

<div id="CommonAlertMessageBackg" style="display: none; height: 100%; left: 0; margin: 0; opacity: 0.7; position:absolute; top: 0; visibility: visible; width: 100%; z-index: 998; "> </div>　　//解释：position:absolute;是固定在屏幕上；position:fixed;是系在屏幕上，跟随着滚动条移动的；
<div id="loadding" style="display: none; position: absolute; z-index: 999;">
   <img src="@Url.Content("~/Content/img/loading3.gif")" alt="加载中......" />
</div>

 

<script type="text/javascript">
    var ShowLoadding = function () {
        var width = $(window).width();
        var height = $(window).height();
        $("#loadding").css("left", width / 2);
        $("#loadding").css("top", height / 2);
        $("#loadding").show();

        var top = $("#ListContent").offset().top;
        var left = $("#ListContent").offset().left;
        var width = $("#ListContent").width();
        var height = $("#ListContent").height();
        $("#CommonAlertMessageBackg").css({ "top": top, "left": left, "width": width, "height": height });

        $("#CommonAlertMessageBackg").show();
    };
    var HideLoadding = function () {
        $("#loadding").hide();
        $("#CommonAlertMessageBackg").hide();
    };
</script>