例子很簡單,就是給沒有height的div在一定高度時設置滾動條。
style部分:
<style>
.showInput{width: 300px;height: 30px;font-size: 20px;line-height: 30px;}
.greyBox{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #ccc;opacity: 0.6;display: none;z-index: 8888;}
.productionBox{position: fixed;width: 600px;top: 10%;left: 50%;margin-left: -300px;border: 1px solid #e3e5f1;background-color: #fff;display: none;z-index: 9999;}
.title{width: 600px;text-align: center;height: 40px;line-height: 40px;font-size: 18px;font-weight: bold;}
.butBox{margin:15px;}
.butBox .addOnly{width: 60px;margin-right: 15px;margin-bottom: 10px;}
.addMain .inputBox{padding-left: 15px;margin-top: 10px;}
.addMain .inputBox input{width: 45%;height: 25px;line-height:25px;font-size: 16px;margin-left: 5px;margin-right: 5px;}
.operation{width: 600px;margin-top: 20px;margin-bottom: 20px;padding-left: 200px;}
.operation .btnConfirm{margin-right: 30px;}
</style>
html部分:
<input type="text" placeholder="請雙擊" class="showInput">
<!--隱藏的遮罩層-->
<div class="greyBox"></div>
<!--隱藏的生產批次選擇窗口-->
<div class="productionBox" style="overflow-y: scroll;overflow-x: hidden; max-height:400px;"> //設置最大高度400px時,出現滾動條
<div class="title">編輯窗口</div>
<hr style="border: 1px dashed #ecf1f5;"/>
<div class="butBox">
<button class="addOnly addProduction">添加</button>
<button class="addOnly delProduction">刪除</button>
</div>
<div class="addMain">
</div>
<div class="operation" >
<button class="btnConfirm">確定</button>
<button class="btnQuxiao">取消</button>
</div>
</div>
script部分:
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
//生產批次選框觸發事件
$(".showInput").on("dblclick",function () {
$(this).blur();
$(".greyBox").show();//遮罩顯現
$(".productionBox").show();
});
//添加按鈕觸發事件
$(".addProduction").on("click",function () {
var str = "";
str = "<div class='inputBox'>" +
"<input type='text' class='content' placeholder='請輸入內容'>" +
"</div>";
$(".addMain").append(str);
});
//刪除按鈕觸發事件
$(".delProduction").on("click",function () {
$(".addMain").children(":last").remove();
});
//確認按鈕觸發事件
$(".btnConfirm").on("click",function () {
var str='';
$(".content").each(function(){
str += $(this).val()+",";
});
str = str.substring(0,str.length - 1); //拼接input內值的字符串
$(".showInput").val(str).focus();
$(".greyBox").hide();
$(".productionBox").hide();
});
//取消按鈕觸發事件
$(".operation .btnQuxiao").on("click",function () {
$(".greyBox").hide();
$(".productionBox").hide();
$(".showInput").focus();
});
})
</script>
以上僅供參考!