zoukankan      html  css  js  c++  java
  • 动态div设置滚动条overflow-y: scroll

    例子很简单,就是给没有height的div在一定高度时设置滚动条。

    style部分:

    <style>
    .showInput{ 300px;height: 30px;font-size: 20px;line-height: 30px;}
    .greyBox{position: fixed;top: 0;left: 0; 100%;height: 100%;background-color: #ccc;opacity: 0.6;display: none;z-index: 8888;}
    .productionBox{position: fixed; 600px;top: 10%;left: 50%;margin-left: -300px;border: 1px solid #e3e5f1;background-color: #fff;display: none;z-index: 9999;}
    .title{ 600px;text-align: center;height: 40px;line-height: 40px;font-size: 18px;font-weight: bold;}
    .butBox{margin:15px;}
    .butBox .addOnly{ 60px;margin-right: 15px;margin-bottom: 10px;}
    .addMain .inputBox{padding-left: 15px;margin-top: 10px;}
    .addMain .inputBox input{ 45%;height: 25px;line-height:25px;font-size: 16px;margin-left: 5px;margin-right: 5px;}
    .operation{ 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>
    以上仅供参考!
  • 相关阅读:
    没有项目种类分配到科目XXX
    编制总账科目凭证技巧(贷方)
    设置雇员容差组
    设定容差组
    英语-20210226
    如何流利说英语
    英语-20210225
    EPS(每股盈余)
    大本力量训练法
    拓端tecdat|R语言逻辑回归分析连续变量和分类变量之间的“相关性“
  • 原文地址:https://www.cnblogs.com/lingdu87/p/7833561.html
Copyright © 2011-2022 走看看