• Bootstrap Popover(弹出框)弹出自定义格式代码


    1. HEAD 标签之间引入CSS:<link href="../../../public/css/bootstrap.min.css" rel="stylesheet">
    2. BODY标签最末端引入JS:<script src="../../../public/js/jquery.min.js "></script>

                      <script src="../../../public/js/bootstrap.min.js "></script>

    3. 在2的基础上再插入两端JS代码:

      <script>

                        $(function () {

                            $('[data-toggle="popover"]').popover()

                        });

                    </script>

                    <script>

                     $(function(){

                     $('[rel=popover]').popover({

                     html : true,

                     content: function() {

                     return $('#popover_content_wrapper').html();

                     }

                     });

                     });

                    </script>

    1. 放置一段DIV,这段DIV的作用是显示红色文字:

      <div id="popover_content_wrapper" style="display: none">

                    <div>

    <span style="color:red">Hello</span>

                    </div>

                </div>

    1. 引入将要使用弹出窗口的HTML元素

      <li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">

                    弹出红色字体

                </li>

    1. 效果如下:

      原文章来源 stackoverflow.com

      Bootstrap popover 文档 http://v3.bootcss.com/javascript/#popovers

  • 相关阅读:
    Asp.net MVC 自定义路由在IIS7以上,提示Page Not Found 解决方法
    mysql 常用操作
    Mongo常用操作
    Cent Os 常用操作
    Window 8.1 开启Wifi共享
    解决 对象的当前状态使该操作无效 的问题
    unity3d: how to display the obj behind the wall
    unreal network
    rust borrow and move
    erlang的map基本使用
  • 原文地址:https://www.cnblogs.com/my4piano/p/5323718.html
Copyright © 2020-2023  润新知