thinkphp tp5 模板文件 循环输出 bootstrap 模态框 弹窗 获取 微信媒体文件素材 media_id

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no"/>
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="renderer" content="webkit">
<meta name="description" content="">
<meta name="keywords" content="">

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript" >

</script>

<style type="text/css">

</style>

<title>微信媒体文件管理</title>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"  data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">广告管理系统</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">新建广告</a></li>
            <li><a href="#">微信文件</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    test <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

<div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title" style=‘text-align:center;font-weight:600;‘>微信媒体文件管理</h2>
    </div>
    <div class="panel-body">
    <div class="table-responsive">
    <table class="table  table-striped">
        <caption>

        </caption>
        <thead>
            <tr>
            <th>序号</th>
            <th>标题title</th>
            <th>操作</th>
            </tr>
        </thead>
        <tbody>

            {volist name=‘item‘ id=‘vo‘ empty="暂时没有数据"}
                <tr>
                <td>    

 <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#{$i}">
    {$i}
</button>
<!-- 模态框(Modal) ------------------------------------------------------------>
<div class="modal fade" id="{$i}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    {$i}
                </h4>
            </div>
            <div class="modal-body">
            <table class="table  table-striped" style="word-break:break-all; word-wrap:break-all;">
                <tr>
                <td>【title】{$vo.content.news_item.0.title}</td>
                </tr>
                <tr>
                <td>【digest】{$vo.content.news_item.0.digest}</td>
                </tr>
                <tr>
                <td>【url】{$vo.content.news_item.0.url}</td>
                </tr>
                <tr>
                <td>【thumb_url】{$vo.content.news_item.0.thumb_url}</td>
                </tr>
            </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal ------------------------------------------------------------------->
<script>
   $(function () { $(‘#{$i}‘).modal(‘hide‘)})});
</script>
<script>
   $(function () { $(‘#{$i}‘).on(‘hide.bs.modal‘, function () {
      alert(‘嘿,我听说您喜欢模态框...‘);})
   });
</script>           

                </td>
                <td><a href=‘{$vo.content.news_item.0.url}‘ target=‘_blank‘>{$vo.content.news_item.0.title|mb_substr=0,10,‘utf-8‘}...</a></td>
                <td><a href=‘{:url("found_ad",["media_id"=>$vo["media_id"]])}‘>新建广告</a></td>
                </tr>
            {/volist}

        </tbody>
    </table>
    </div>
   </div>
</div>

</body>
</html>
时间: 2024-10-07 06:10:21

thinkphp tp5 模板文件 循环输出 bootstrap 模态框 弹窗 获取 微信媒体文件素材 media_id的相关文章

JavaScript:bootstrap 模态框的简单应用

最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 1 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> 2 <script type="text/javascript" src="js/jquery.min.js">

Bootstrap模态框按钮

1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <!-- 模态框(Modal) --

Bootstrap 模态框(也可以说的弹出层)

最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html页面的写法如下: <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> <script src="bootstrap/js/j

去除BOOTSTRAP模态框半透明阴影

当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上这样一句代码: <div class="modal-backdrop  in"></div> 案例:自带半透明阴影的模态框 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta char

关于手动关闭BootStrap模态框

在网上找手动关闭BootStrap模态框的解决方法,说是(需要引用bootstrap.js等): $("#myModal").modal('hide'); 但是我发现我的只能关闭 , 不能关闭下面那半透明层.找了下发现是出现这两行代码的缘故. <div class="modal-backdrop fade in"></div> <div class="modal-backdrop fade in"></d

bootstrap模态框远程加载网页的正确处理方式

bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href="tieniu.php" data-target="#modal">Click me</a> 使用脚本模式: $("#modal").modal({ remote: "tieniu.php" }); 没有给出任何实例,这种用

使用bootstrap模态框实现浮动层

authour: 陈博益 updatetime: 2015-04-22 06:52:15 friendly link: http://v3.bootcss.com/javascript/#modals 目录: 1,bootstrap模态框的使用示例 2,注意点 1,下面是一个简单的例子说明bootstrap模态框的使用: 1 <!DOCTYPE html> //modal.html 2 <html xmlns="http://www.w3.org/1999/xhtml"

第二百四十三节,Bootstrap模态框插件

Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框的弹窗组件需要三层 div 容器元素: 1分别为 modal(模态声明层). 2dialog(窗口声明层). 3content(内容层). 在内容层里面,还有三层: 1分别为 header(头 部). 2body(主体). 3footer(注脚). modal样式class类,写在声明模态框<div

Bootstrap 模态框、轮播 结合使用

Bootstrap 模态框和轮播分开使用的教程网上很多.但是两者结合使用的例子和资料很少.两者结合使用时,开始我遇到了不少bug,现在分享给大家. 我的这个例子是把图片轮播嵌入到模态框里. 最后的效果如下图:点击页面上按钮,弹出模态框,模态框里的图片开始轮播,点击旁边空白位置,模态框消失. 代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 轮播.模态框</title> <link