求解各路大神，用display隐藏了一个div 通过点击事件显示出来后为什么整个块是缩短的

youyelin 2015-09-11 02:54:45

用display隐藏了一个div 通过点击事件显示出来后为什么整个块是缩短的万分感谢

...全文

325 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

wula0010 2015-09-14

打赏
举报

div上把他的style display改为block 宽度不会缩小这个是关键，你用js改变属性的时候，style就不起作用了，所以让你用css来定义你的这个div的样式。

youyelin 2015-09-11

打赏
举报

是用jquery做的，刚开始设置该div的display 为none，然后点击一个按钮之后要他显示，但点击后显示div整个宽度缩小了，如果不点按钮，直接在div上把他的style display改为block 宽度不会缩小

Cabbage_gang 2015-09-11

打赏
举报

引用 6 楼 u013930312 的回复:

长宽别用百分比直接写死PX 或者 div的样式单独写一个class js/jq 里边显示DIV 给DIV加CSS 你是做弹框输入？给你个代码试试弹出的DIV

<!-- 新增弹框 -->
<div id="addRole" style="display: none; width: 100%; height: 100%; background-color: #000; position: absolute; top: 0; left: 0; z-index: 2; opacity: 0.15; filter: alpha(opacity =  15);"></div>
<div id="addRoleChildDivId" class="wh600 wrap_popboxesok4" style="display: none; position: fixed; width: 240px; height:170px; top: 100px; left: 50%; margin-left: -150px; z-index: 3; font-size: 12px; font-family: '宋体';">

<div id="popDiv"   style="background:#FFFFFF;width:280px"> 
	<table style="width: 100%">
		<tr style="background:#C8DEE9;" >
		<th colspan="2"><span style='color: #000000'>新增角色</span></th>
		</tr>
		<tr>
			<td style="width:60px">角色名 :</td>
			<td><input type="text" id="roleNameAdd" style="width: 95%;border: 1px solid;" /></td>
			
		</tr>
		
		<tr align="center">
			<td colspan="2">
				<input class="Submit"  type="button" value="提交" style="width: 60px" onclick="addRole()"/>   
	   		<input class="Submit"  type="reset" value="取消" onclick="hideAddRole()" style="width: 60px"/ /> 
	   	</td>
		</tr>
	</table>
</div> 
</div>

js代码


<script type="text/javascript" language="JavaScript">
//新增角色弹框显示
	function showAddRole() {
		var div1 = document.getElementById("addRole");
		var div2 = document.getElementById("addRoleChildDivId");
		div1.style.display="";
		div2.style.display="";
	} 
	//新增角色弹框隐藏
	function hideAddRole() {
		var div1 = document.getElementById("addRole");
		var div2 = document.getElementById("addRoleChildDivId");
		div1.style.display="none";
		div2.style.display="none";
		//设置输入框文本为空
		document.getElementById('roleNameAdd').value="";
	} 
</script>


<input name="button" type="button" class="Submit" style="width:100px" value="新增角色" onclick="showAddRole();" />

忘了还有弹出的按钮

Cabbage_gang 2015-09-11

打赏
举报

长宽别用百分比直接写死PX 或者 div的样式单独写一个class js/jq 里边显示DIV 给DIV加CSS 你是做弹框输入？给你个代码试试弹出的DIV

<!-- 新增弹框 -->
<div id="addRole" style="display: none; width: 100%; height: 100%; background-color: #000; position: absolute; top: 0; left: 0; z-index: 2; opacity: 0.15; filter: alpha(opacity =  15);"></div>
<div id="addRoleChildDivId" class="wh600 wrap_popboxesok4" style="display: none; position: fixed; width: 240px; height:170px; top: 100px; left: 50%; margin-left: -150px; z-index: 3; font-size: 12px; font-family: '宋体';">

<div id="popDiv"   style="background:#FFFFFF;width:280px"> 
	<table style="width: 100%">
		<tr style="background:#C8DEE9;" >
		<th colspan="2"><span style='color: #000000'>新增角色</span></th>
		</tr>
		<tr>
			<td style="width:60px">角色名 :</td>
			<td><input type="text" id="roleNameAdd" style="width: 95%;border: 1px solid;" /></td>
			
		</tr>
		
		<tr align="center">
			<td colspan="2">
				<input class="Submit"  type="button" value="提交" style="width: 60px" onclick="addRole()"/>   
	   		<input class="Submit"  type="reset" value="取消" onclick="hideAddRole()" style="width: 60px"/ /> 
	   	</td>
		</tr>
	</table>
</div> 
</div>

js代码


<script type="text/javascript" language="JavaScript">
//新增角色弹框显示
	function showAddRole() {
		var div1 = document.getElementById("addRole");
		var div2 = document.getElementById("addRoleChildDivId");
		div1.style.display="";
		div2.style.display="";
	} 
	//新增角色弹框隐藏
	function hideAddRole() {
		var div1 = document.getElementById("addRole");
		var div2 = document.getElementById("addRoleChildDivId");
		div1.style.display="none";
		div2.style.display="none";
		//设置输入框文本为空
		document.getElementById('roleNameAdd').value="";
	} 
</script>