本文详细介绍了如何设计和实现一个分支页面，包括使用HTML、CSS和JavaScript进行布局和交互设计，通过模态窗口实现元素禁用效果，以及如何根据用户选择动态调整页面元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8" />
<title>分支页面</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body onload="window.status='完毕';">
<form name="transitionForm" id="transitionForm">
<div class="panel">
<div class="uf_tit_main">
<div class="f_l">
<b>分支属性</b>
</div>
</div>
<div id="p" class="uf_panel_cont" style="position:relative">
<table class="uf_table_form" cellspacing="0">
<tr>
<td class="w50p"><span style="color:red">*</span>显示名称：<br><input placeholder="不能为空且长度不能大于30" class="uf_inp_txt" type="text" id="transitionName" name="transitionName" " ></td>
<td class="w50p"><span style="color:red">*</span>业务类型：<a id="chooseOrg" onclick="showtree()" href="#">[选择]</a>
<input autocomplete="off" placeholder="请点击选择业务类型" id="businessTypeName" name="businessTypeName" class="uf_inp_txt" type="text" readonly="readonly">
<div></div>
<ul id="busiTypeTree" class="ztree" style="display:none;position:absolute;background-color:#EAF2F5;width:210px"></ul>
</td>
</tr>
<tr>
<td class="w50p">
<input type="checkbox" id="isDefault" name="isDefault" value="true" checked="checked"/> 默认连线
</td>
<td class="w50p">
优先级
<select id="priority" name="priority">
<option value="60">高</option>
<option value="50">次高</option>
<option value="40"selected="selected">中</option>
<option value="30">次中</option>
<option value="20">低</option>
<option value="10">次低</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="radio" id="isSimpleExpression" checked name="isSimpleExpression" value="true" checked="checked"/> 使用简单表达式
<br>
左值 <input style="width:90px" type="text" name="leftValue" disabled value="optCode"/>
<select name="compType">
<option value="EQ">==</option>
<option value="GT">></option>
<option value="LT"><</option>
<option value="GE">>=</option>
<option value="LE"><=</option>
<option value="NE">!=</option>
</select>
右值<select style="width:90px" id="line_right" name="rightValue">
</select>
</td>
</tr>
<tr>
<td>
<input type="radio" name="isSimpleExpression" value="false"/> 使用复杂表达式<br>
<textarea style="width:340px;height:60px;" id="complexExpressionValue" name="complexExpressionValue"></textarea><br>
描述<br>
<textarea style="width:340px;height:60px;" id="description" name="description"></textarea>
</td>
</tr>
</table>
<div id="line_modal1" class="modaldiv" style="display: block; top: 115px; left: 0px; width: 100%; height: 90px; position: absolute; opacity: 0.4; background: white;"></div>
<div id="line_modal2" class="modaldiv" style="display:none; top: 90px; left: 0px; width: 100%; height: 25px; position: absolute; opacity: 0.4; background: white;"></div>
</div>
<p class="clearfix"></p>
</div>
<div class="uf_tr_btnWrap">
<button class="uf_btn_normal uf_btn_defult" type="submit" id="submit">保存</button>
<button class="uf_btn_normal" type="reset">重 置</button>
</div>
</form>
</body>
<script type="text/javascript">
$("#isDefault").click(function(){
if(this.checked){
$("#line_modal1").show();
}else{
$("#line_modal1").hide();
}
});
$("input[name='isSimpleExpression']").click(function(){
if($(this).val()=="true"){
$("#line_modal2").hide();
}else{
$("#line_modal2").show();
}
});
</script>
</html>
粘之即用。
效果：
原理：div悬浮实现模态窗口，颜色：白色；透明度：40%；制造一种disable的效果。
值得注意的两点是：
- 1.div悬浮时，父div的position属性要设置为relative，要覆盖的div的position属性设置为absolute
- 2.悬浮的模态窗口位置可能需要自己手动调整
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
