div+js写弹出框

最新推荐文章于 2022-12-08 16:58:05 发布

Sunlalalla

最新推荐文章于 2022-12-08 16:58:05 发布

阅读量1.1k

点赞数

分类专栏：开发经验前端文章标签： js div 弹出框

本文链接：https://blog.csdn.net/Sun_of_Rainy/article/details/83659492

版权

开发经验同时被 2 个专栏收录

70 篇文章 0 订阅

订阅专栏

前端

69 篇文章 0 订阅

订阅专栏

本意是想重写alert方法，折腾了半天没有成果，然后想着用div写个弹出框，效果是实现了，但是弹出框是不能拖动的，还有一个问题是就算能拖动，关闭按钮不能随弹出框移动，它的位置是写死的

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<title>js写弹出框</title>
<style>
     body {
            height: 100%;
            overflow: auto;
            margin: 0;
        }
        #div_Test {
            position: fixed;
            _position: absolute;
            top: 50%;
            left: 50%;
            border: 2px solid #C0C0C0;/*弹出框边框样式*/
            background-color: #FFFFFF;/*弹出框背景色*/
            display:none;
            width:400px;
            height:200px;
            font-size：10px
        }
        * html {
            overflow: hidden;
            position: absolute;
        }
        #close{
        	 background-color:#FFF;
    		 position:fixed;
    		 bottom:40%;
    		 left:50%;
    		 right:5%;
        }
</style>

<script type="text/javascript">

//弹出层
function show_Win(div_Win, tr_Title, event) {
    var s_Width = document.documentElement.scrollWidth; //滚动 宽度
    var s_Height = document.documentElement.scrollHeight; //滚动 高度
    var js_Title = $("title"); //标题
    js_Title.css("cursor", "move");
    //创建遮罩层
    $("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body");
    //获取弹出层
    var msgObj = $("#" + div_Win);
    msgObj.css('display', 'block'); //必须先弹出此行，否则msgObj[0].offsetHeight为0，因为"display":"none"时，offsetHeight无法取到数据；如果弹出框为table，则为'',如果为div，则为block，否则textbox长度无法充满td
    //y轴位置
    var js_Top = -parseInt(msgObj.height()) / 2 + "px";
    //x轴位置
    var js_Left = -parseInt(msgObj.width()) / 2 + "px";
    msgObj.css({ "margin-left": js_Left, "margin-top": js_Top });
    //使弹出层可移动
    //msgObj.draggable({ scroll: true});
    //Mover(msgObj)
    $(document).ready(function(){
  	  $("#div_Test").click(function(){
  			$("#title").css("color","red");
  	  });
  	  
  	});
}

$(document).ready(function(){
	  $("#close").click(function(){
	  $("#div_Test").hide();
	  });
	  
	});
</script>
</head>
<body>
<input id="bb" type="button" value="测试弹出框" onclick="show_Win('div_Test', 'title', event)" />
       <div id="div_Test">
           <div id="title" style="border: 1px solid #f0f0f0;font-size:20;text-align:center">标题</div>
         		  内容
         	<input id="close" type="button" value="关闭" />
         	
       </div>
</body>
</html>

还有一个问题：如何在html中获取input输入框的输入值

var name = $("#name").val();

一个输入框为空显示提示语的例子

<body>
<div id="main">主要内容展示区</div>
<input type="text" id="name" onblur='test()'>
<div id='alert'>

</div>
</body>

<script type="text/javascript">
function test(){
	//$('.loading-gif').show();
	//$('#main').hide();
	var name = $("#name").val();
	if(name == ""){
		$("#alert").html("姓名输入为空")
	}
}

$(".name").blur(function(){
	if(name == ''){
		$('#alert').html("姓名输入为空")
	}
});
</script>

Sunlalalla

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div+js写弹出框

本意是想重写alert方法，折腾了半天没有成果，然后想着用div写个弹出框，效果是实现了，但是弹出框是不能拖动的，还有一个问题是就算能拖动，关闭按钮不能随弹出框移动，它的位置是写死的代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;script src="js/jqu...
复制链接

扫一扫

专栏目录