zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    joda-time的使用
    logger 的使用一 小结
    svn 技巧
    mysql 获取一段时间的数据
    Drools5
    Java各种Utils小结
    Java 8 新特新 工具类 ZonedDateTime
    集合工具类CollectionUtils、ListUtils、SetUtils、MapUtils的使用
    sonar 的使用
    MySQL入门教学(看完必懂,图文详解!)
  • 原文地址:https://www.cnblogs.com/my4piano/p/5323718.html
Copyright © 2011-2022 走看看