美文网首页
Bootstrap向弹出的模态框传递参数

Bootstrap向弹出的模态框传递参数

作者: 十柒年 | 来源:发表于2018-09-29 11:57 被阅读388次

1.Bootstrap向弹出的模态框传递参数

在一新闻列表页面,点击每一条信息,都打开一个模态框用来显示新闻的详情。那么如何向模态框传值,知道我要打开的是那一篇新闻呢?先看代码。

 <div class="new_main" onclick="NewsDetail('2')"> </div>

这里写的div里面有个NewsDetail的方法,里面是参数。页面上加一个隐藏的input框

   <input type="hidden" id="newsid">

然后见证奇迹。

 $(function () {
        //绑定模态框展示的方法 
        window.NewDetail = function (id) {
            $("#newsid").val(id);
            $('#myModal').modal('show');
        }
        $('#myModal').on('show.bs.modal', function (event) {
            var newid = $("#newsid").val();
            var modal = $(this);  //get modal itself
            modal.find('.modal-body iframe').attr("src", "detail.html?newsid=" + newid);
        });
    })

触发NewDetail 方法的时候,先给隐藏的input赋值,然后在myModal这个模块框里取值,给模态框里面的元素赋值就行了。
Study hard and make progress every day.

更多学习资料请关注"爱游戏爱编程"。


爱游戏爱编程.jpg

相关文章

网友评论

      本文标题:Bootstrap向弹出的模态框传递参数

      本文链接:https://www.haomeiwen.com/subject/irvvoftx.html