zoukankan      html  css  js  c++  java
  • bootstrap data-toggle 冲突(如何同时使用tooltip工具提示和modal模态框)

    https://blog.csdn.net/weixin_44555663/article/details/105075422

    在做web课后作业的时候遇到了一个问题,记录一下。

    1.button中使用模态框

    <button type="button" data-placement="bottom" title="Click here to log in" 
                 class="btn btn-primary tooltip-toggle" data-toggle="modal"
                 data-target="#exampleModal" data-whatever="@mdo">
                 Login
                 </button>

    data-toggle=“modal”

    2.js实现tooltip
    1)在button中依旧写入data-placement(显示位置) 和 title(显示内容)
    2)在button的class中添加tooltip-toggle类(任意取名,只要和jQuery 元素选择器的内容对应即可)
    3)在js文件中添加$(’.tooltip-toggle’).tooltip();表示这个类需要实现tooltip的功能==在button中写入data-toggle=“tooltip”
    4)注意一个点:如果是直接在html中写js,需要将写在bootstrap和jquery的js文件导入代码下面

        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <!-- 文件夹导入 -->
        <script src="./js/bootstrap.min.js"></script>
        <script>
            $(function () {
                $('.tooltip-toggle').tooltip();
            });
        </script>


    ————————————————
    版权声明:本文为CSDN博主「余丁」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_44555663/article/details/105075422

  • 相关阅读:
    我的软件工程课目标
    软件工程课程的建议
    结对编程学习fault、error、failure三种状态
    结对编程项目的过程记录与收获
    “结对编程”之我见
    关于问卷调查
    我的软件工程课目标
    软件工程课程建议
    结对编程2
    结对编程之四则运算
  • 原文地址:https://www.cnblogs.com/ella-li/p/14757094.html
Copyright © 2011-2022 走看看