简单的layer.open弹出输入框样式

js代码

layer.open({
	id:1,
        type: 1,
        title:'修改密码',
        skin:'layui-layer-rim',
        area:['450px', 'auto'],
        
        content: ' <div class="row" style="width: 420px;  margin-left:7px; margin-top:10px;">'
            +'<div class="col-sm-12">'
            +'<div class="input-group">'
            +'<span class="input-group-addon"> 新 密 码   :</span>'
            +'<input id="firstpwd" type="password" class="form-control" placeholder="请输入密码">'
            +'</div>'
            +'</div>'
              +'<div class="col-sm-12" style="margin-top: 10px">'
              +'<div class="input-group">'
              +'<span class="input-group-addon">确认密码:</span>'
              +'<input id="secondpwd" type="password" class="form-control" placeholder="请再输入一次密码">'
              +'</div>'
              +'</div>'
              +'</div>'
        ,
        btn:['保存','取消'],
        btn1: function (index,layero) {
    	},
        btn2:function (index,layero) {
        	 layer.close(index);
        }

    });
效果



注:将layer层设置成固定大小时,有时保存和取消按钮会显示在layer层区域外,如果想要按钮正常显示,可将layer层中area属性中的高度设置为auto

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 LayUI 提供的层(layer)组件来实现这个功能。具体步骤如下: 1. 在 jsp 页面中引入 layUI 相关的 css 和 js 文件。 2. 在查询按钮的点击事件中,调用 layer.open() 方法打开一个层。例如: ``` <button onclick="openLayer()">查询</button> <script> function openLayer() { layer.open({ type: 1, title: '输入信息', content: '<div><input type="text" placeholder="请输入信息"></div>', btn: ['取消', '确定'], yes: function(index, layero) { // 取消按钮的回调函数 layer.close(index); }, btn2: function(index, layero) { // 确定按钮的回调函数 var inputVal = $(layero).find('input').val(); // 处理输入的信息 layer.close(index); } }); } </script> ``` 在这个例子中,我们定义了一个 `openLayer()` 函数,在点击查询按钮时调用这个函数。这个函数中,我们使用 `layer.open()` 方法打开一个层。其中: - `type: 1` 表示这是一个普通的层。 - `title: '输入信息'` 表示层的标题。 - `content: '<div><input type="text" placeholder="请输入信息"></div>'` 表示层的内容,这里是一个包含一个输入框的 div 元素。 - `btn: ['取消', '确定']` 表示层的底部按钮,这里有一个取消按钮和一个确定按钮。 - `yes: function(index, layero) { ... }` 表示点击取消按钮时的回调函数。这里我们只是关闭层。 - `btn2: function(index, layero) { ... }` 表示点击确定按钮时的回调函数。这里我们获取输入框中的值,并进行处理。最后,也要关闭层。 3. 根据实际需求,可以对层的样式、位置等进行进一步的配置和定制。 希望这个例子能对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值