讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > css教程 > 正文

如何用Bootstrap实现图片弹出放大

PHPz
发布： 2017-09-23 11:08:52
原创
8367人浏览过

<td>
<center>
@@##@@" onclick="javascript:showimage('<?php echo $v['pic_detail'];?>');" /></center></td>
  <p id="ShowImage_Form" class="modal hide">         
         <p class="modal-header">
             <button data-dismiss="modal" class="close" type="button"></button>
         </p>
           <p class="modal-body">
            <p id="img_show">
            </p>
        </p>
    </p>
登录后复制

实现JS:

//显示大图    
   function showimage(source)
     {
         $("#ShowImage_Form").find("#img_show").html("<image src='"+source+"' class='carousel-inner img-responsive img-rounded' />");
         $("#ShowImage_Form").modal();
     }
登录后复制

实现效果：

如何用Bootstrap实现图片弹出放大

【相关视频推荐：Bootstrap教程】

极品模板多语言企业网站管理系统1.2.2
极品模板多语言企业网站管理系统1.2.2

【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下： 01、支持多语言扩展（独立内容表，可一键复制中文版数据） 02、支持一键修改后台路径； 03、杜绝常见弱口令，内置多种参数过滤、有效防范常见XSS； 04、支持文件分片上传功能，实现大文件轻松上传； 05、支持一键获取微信公众号文章（保存文章的图片到本地服务器）； 06、支持一键

极品模板多语言企业网站管理系统1.2.2 0
查看详情 极品模板多语言企业网站管理系统1.2.2
image

以上就是如何用Bootstrap实现图片弹出放大的详细内容，更多请关注php中文网其它相关文章！

相关标签：
bootstrap

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：网页进度条一种简单的实现方法 下一篇：如何利用 CSS3 实现的无缝轮播
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
css导航项hover文字变色太突兀怎么办_结合transition-color让文字颜色渐变 正确做法是将transition:color0.3s写在元素默认状态（如a{color:#333;transition:color0.3sease;}），而非hover状态，并统一颜色格式（如全用hex或rgb），以确保平滑过渡。
2025-12-15 21:07:02
456
css国际化字体切换不生效怎么办_font-face多语言字体引入说明 字体切换不生效的核心原因是未解决字体回退链和语言匹配机制。需确保font-family名称全局一致、用lang属性配合字体堆叠、验证字体文件实际包含目标文字字形，并谨慎使用font-display策略。
2025-12-15 21:05:33
125
css设置padding后导致布局整体错位怎么办_css错位问题用flex或grid重新规整布局 设置padding导致布局错位是因为默认盒模型下padding会增加元素总尺寸，超出预期空间；解决方法是使用box-sizing:border-box让宽高包含padding，并采用Flex或Grid布局，利用flex:1或网格轨道分配空间，配合gap控制间距，避免错位。
2025-12-15 20:55:20
822
css定位内容撑破布局怎么办_限制宽高并用overflow控制显示范围 内容撑破布局的本质是子元素尺寸超出父容器设定范围，解决需三步：明确父容器宽高限制、用overflow精准控制溢出行为（如hidden裁剪、auto智能滚动）、配合word-break/white-space处理长文本。
2025-12-15 20:55:03
301
css背景颜色显得黯淡怎么办_通过hsl提高饱和度增强色彩亮度 应改用HSL模型调高饱和度与亮度，HSL中S建议60–85%、L建议55–75%，并可用hsla()叠加透明度（如0.92）增强通透感，避免alpha过低导致沉闷。
2025-12-15 20:50:43
902
css flex布局方向切换后子项顺序错乱怎么办_结合order属性重新定义排列顺序 Flex布局方向切换时子项视觉顺序错乱，需用order属性显式控制逻辑顺序；order默认0、数值越小越靠前，排序在flex-direction之后执行，且不影响DOM结构和可访问性。
2025-12-15 20:50:03
715
CSS布局出现左右两栏高度不一致怎么办_利用flex的align-stretch实现等高布局 Flex布局中左右两栏等高需确保父容器设display:flex，子项未设置height/align-self等覆盖属性；align-items:stretch为默认值，无需显式声明；内容少时可用padding或::after伪元素辅助撑开。
2025-12-15 20:45:12
585
css flex子项内容超长导致布局错乱怎么办_使用min-width:0解决内容撑开问题 min-width:0是解决Flex子项内容超长撑开容器的关键，它覆盖默认min-width:auto，允许子项收缩，并需配合overflow或换行策略生效。
2025-12-15 20:32:54
963
常见的轻量CSS框架有哪些_CSS工具与框架轻量化推荐 常见的轻量CSS框架核心特点是体积小（通常仅几KB），专注基础样式与实用工具类，无冗余组件，加载快，易定制，适合性能敏感或渐进增强项目。
2025-12-15 20:30:07
949
css项目里元素未按预期居中怎么办_分别使用flex/grid选择最适合的居中方案 Flex适合单维内容居中，Grid适合二维网格布局；居中失败主因是父容器无宽高、子元素绝对定位或行内元素未设display:block。
2025-12-15 20:18:08
641
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部