layui open打开新网页怎么使他不可以点击原页面
时间: 2024-06-09 19:06:04 浏览: 17
您可以使用以下代码来实现在 layui open 弹窗中打开新网页时禁止点击原页面:
```javascript
// 在弹窗中打开新网页
layer.open({
type: 2,
content: 'http://www.example.com',
});
// 禁止点击原页面
$('.layui-layer-shade').click(function(){
return false;
});
```
这里我们在弹窗中打开新网页,然后通过添加一个点击事件来禁止点击原页面。具体来说,我们给遮罩层(即原页面上的半透明黑色遮罩)添加了一个点击事件,这个事件返回 false,意味着点击事件被阻止了,从而禁止了用户点击原页面。
相关问题
layui双击表格打开新页面
你可以使用Layui的table模块提供的"on('rowDouble')"事件来实现双击表格打开新页面的功能。以下是一个简单的示例代码:
HTML:
```html
<table id="demo" lay-filter="test"></table>
```
JavaScript:
```javascript
layui.use(['table', 'layer'], function(){
var table = layui.table;
var layer = layui.layer;
//渲染表格
table.render({
elem: '#demo',
url: '/demo/table/user/',
cols: [[
{field:'id', title:'ID', width:80},
{field:'username', title:'用户名', width:120},
{field:'sex', title:'性别', width:80, sort:true},
{field:'city', title:'城市', width:100},
{field:'sign', title:'签名', width:200},
{field:'experience', title:'积分', width:80, sort:true},
{field:'score', title:'评分', width:80, sort:true},
{field:'classify', title:'职业', width:100},
{field:'wealth', title:'财富', width:135, sort:true},
]]
});
//监听表格双击事件
table.on('rowDouble(test)', function(obj){
layer.open({
type: 2,
title: '详情页',
content: '/demo/table/user/detail?id=' + obj.data.id,
area: ['800px', '600px'],
maxmin: true
});
});
});
```
在上述代码中,我们使用 table 模块的 on('rowDouble') 事件来监听表格的双击事件。当用户双击某一行数据时,会触发该事件,我们在事件监听器中打开一个新页面来显示该行数据的详情。你需要将 content 参数设置为一个对应的页面地址,并根据需要设置页面的宽度和高度。
layui open 给打开的html传参
在 Layui Open 中,可以通过 `layer.open()` 函数的 `content` 参数来打开一个 HTML 页面,并且可以向该页面传递参数。下面是一段示例代码:
```javascript
layui.use('layer', function () {
var layer = layui.layer;
// 打开一个 HTML 页面,并传递参数
var url = 'example.html?id=1&name=Tom';
layer.open({
type: 2,
title: '打开一个 HTML 页面',
area: ['500px', '400px'],
content: url
});
});
```
在上面的示例代码中,我们通过 `content` 参数传递了一个 URL,该 URL 包含了两个参数 `id` 和 `name`。在打开的 HTML 页面中,可以通过 JavaScript 获取这些参数,如下所示:
```javascript
// 获取 URL 参数
function getUrlParam(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
// 获取 id 和 name 参数
var id = getUrlParam('id');
var name = getUrlParam('name');
console.log(id, name);
```
以上代码示例中,我们定义了一个 `getUrlParam()` 函数来获取 URL 参数,然后在页面加载完成后,调用该函数获取 `id` 和 `name` 参数的值,并输出到控制台中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)