请使用jBox开发一个可以弹出列表信息的提示框,列表信息由后端提供,你可以自己造一些数据
时间: 2024-05-12 20:21:18 浏览: 18
抱歉,作为AI语言模型,无法提供jBox开发代码。但是,以下是一个使用jBox弹出列表信息的示例代码,你可以根据自己的需求进行修改和优化:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>jBox Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jbox@3.3.1/dist/jBox.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jbox@3.3.1/dist/jBox.min.js"></script>
</head>
<body>
<button id="showListBtn">Show List</button>
<script>
$(document).ready(function() {
$('#showListBtn').click(function() {
$.ajax({
url: 'getList.php',
type: 'GET',
dataType: 'json',
success: function(data) {
if (data.length > 0) {
var listHtml = '<ul>';
for (var i = 0; i < data.length; i++) {
listHtml += '<li>' + data[i] + '</li>';
}
listHtml += '</ul>';
new jBox('Modal', {
title: 'List Information',
content: listHtml,
addClass: 'list-box',
closeButton: true,
closeOnEsc: true,
closeOnClick: 'overlay',
blockScroll: true,
animation: 'zoomIn',
overlay: true,
delayOpen: 0,
delayClose: 0,
ajax: {
url: null,
reload: false,
headers: {}
}
}).open();
} else {
alert('No data available!');
}
},
error: function(xhr, status, error) {
alert('Failed to get list data!');
}
});
});
});
</script>
</body>
</html>
```
getList.php代码:
```php
<?php
$listData = array('Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5');
echo json_encode($listData);
?>
```
在这个示例代码中,当用户点击“Show List”按钮时,会通过ajax请求getList.php文件来获取列表数据。然后,如果数据不为空,则使用jBox的Modal类型弹出框来显示列表信息。弹出框可以通过配置选项进行自定义样式和动画效果,同时也支持关闭按钮、键盘和鼠标事件等交互操作。getList.php文件可以根据实际需求来生成或查询列表数据,这里只是简单地返回一个预设的数组数据。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)