boostrap自定义弹出框的样式和内容

小咪咪 2022-12-05 05:24 229阅读 0赞

效果图  
![效果图][20200909150655451.png_pic_center]

## html部分 ##

<div >
         <span data-container="body" data-toggle="popover" data-placement="bottom">查看关联的设备</span>
        </div>
        <div id="popover-content" class="popover-content" style="display: none">
            <div>
                <span class="inlineBlock web-right" style="width: 50px;">设备:</span>
                <span>电 表</span>
            </div>
            <div>
                <span class="inlineBlock web-right" style="width: 50px;">ID:</span>
                <span>TY-456</span>
            </div>
        </div>
    </div>

## js部分 ##

$(function () {    //这也是应用弹出框的地方
         $('[data-toggle="popover"]').popover({ 
               html:true,
               content:function () { 
                   return $('#popover-content').html()
               }
           })
       })

官网的要求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center]  
所以直接在这个基础上面加自定义的内容即可

[20200909150655451.png_pic_center]: /images/20221123/3c2a011c245746da88041602177abbf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/56fd1dd2ada143bda2572d6a4d9e3b78.png

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android自定义弹框样式

MsgDialog package cn.mvp.weight; import android.app.Dialog; import

朴灿烈づ我的快乐病毒、/ 2023年10月04日 14:26/ 0 赞/ 45 阅读

相关 js自定义弹出框、对话框、提示框、弹窗总结

一、JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ========================

一时失言乱红尘/ 2023年02月14日 10:29/ 0 赞/ 57 阅读

相关 boostrap自定义弹出框的样式和内容

效果图 ![效果图][20200909150655451.png_pic_center] html部分 <div > <span data

小咪咪/ 2022年12月05日 05:24/ 0 赞/ 230 阅读

相关 Android 自定义弹出框

1、自定义一个弹出框的布局dialogs <?xml version="1.0" encoding="UTF-8"?> <LinearLayout xmlns

怼烎@/ 2022年08月18日 15:22/ 0 赞/ 298 阅读

相关 android自定义弹出框样式实现

原文地址:[http://blog.csdn.net/duanyanrui/article/details/8494767][http_blog.csdn.net_duanya

亦凉/ 2022年08月10日 11:57/ 0 赞/ 301 阅读

相关自定义弹出模态框

<style > \msgbox \{ width: 5 rem; height: 1 rem; line-height: 1

太过爱你忘了你带给我的痛/ 2022年06月18日 10:59/ 0 赞/ 489 阅读

相关多个弹出框，弹出不同内容

1、被点击的地方用同样的class='test' 2、 $(".test").each(function(i,v){ var nodei = i;

比眉伴天荒/ 2022年05月14日 14:04/ 0 赞/ 349 阅读

相关 HTML不错的自定义弹出框

<%@ page language="java" import="java.util." pageEncoding="UTF-8"%> <% Strin

旧城等待，/ 2022年01月29日 15:09/ 0 赞/ 358 阅读

相关带弹出框的自定义导航页面

<template> <view>  <u-navbar title-color="fff" back-i

向右看齐/ 2021年09月07日 06:17/ 0 赞/ 492 阅读

相关自定义弹框

基于vue,传入tips的值,即可自定义弹框文本内容 <template> <div class='alert'> <di

淡淡的烟草味﹌/ 2021年07月24日 16:24/ 0 赞/ 535 阅读