在引导模式中打开放大图像

作者

如何使用jquery/js和而不是数据属性在模式中打开/放大图像

每当用户将图像插入到内容编辑器中时，我都需要它能够被单击以在js模式下展开，因此我不能依赖用户输入他们不知道如何使用的数据属性

我试过：-

&lt；a href=”https://stackoverflow.com/myImage.png“id=”pop“&gt；
&lt；img src=”https://stackoverflow.com/myImage.png“style=”宽度：400px；高度：264px；“&gt；
点击查看大图
&lt/a&gt；

jQuery:-

$（“#pop”）。在（“单击”，函数（）{
$（this.modal（）；
});

我是否需要向jquery添加信息以传递图像源以显示在模式中

谢谢你

如果您使用的是bootstrap 3，则可以尝试此代码：

HTML

&lt；a href=“”id=“pop”&gt；
&lt；img id=“imageresource”src=”http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg“style=”宽度：400px；高度：264px；“&gt；
点击查看大图
&lt/a&gt；
&lt；！--创建映像将出现的引导模式--&gt；
&lt；div class=“modal fade”id=“imagemodal”tabindex=“-1”role=“dialog”aria labelledby=“myModalLabel”aria hidden=“true”&gt；
&lt；div class=“模态对话框”&gt；
&lt；div class=“模态内容”&gt；
&lt；div class=“模态标题”&gt；
&lt；按钮类型=“按钮”类=“关闭”数据解除=“模式”&gt&书信电报；span aria hidden=“true”&gt&amp；时代&lt/span&gt&书信电报；span class=“仅限sr”&gt；关闭&lt/span&gt&lt/按钮&gt；
&lt；h4 class=“模态标题”id=“myModalLabel”&gt；图像预览&lt/h4&gt；
&lt/部门&gt；
&lt；div class=“模态体”&gt；
&lt；img src=“”id=“imagepreview”style=“宽度：400px；高度：264px；”；
&lt/部门&gt；
&lt；div class=“模态页脚”&gt；
&lt；button type=“button”class=“btn btn default”数据解除=“模态”&gt；关闭&lt/按钮&gt；
&lt/部门&gt；
&lt/部门&gt；
&lt/部门&gt；
&lt/部门&gt；

JavaScript:

$（“#pop”）。在（“单击”，函数（）{
$（'#imagepreview'）.attr（'src'，$（'#imageresource'）.attr（'src'））；//在这里，当用户单击放大链接时，将图像指定给模式
$（'#imagemodal'）.modal（'show'）；//imagemodal是分配给引导模式的id属性，然后我使用show函数
});

这是工作小提琴。
希望这有帮助：）

相关文章：

  1. 如何在jQuery中选择具有多个类的元素？
  2. 如何在jQuery中选择具有多个类的元素？
  3. 如何使用jQuery获取元素的ID？
  4. 在jQuery中删除事件处理程序的最佳方法是什么？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with