javascript - 不同图像的不同模态内容

标签 javascript html bootstrap-modal

我是 JS 或 HTML 的初学者,我需要帮助为不同的图像设置不同的模式内容。例如,当我单击图像1时,模态将弹出显示价格,然后当我单击图像2时,模态将弹出显示数量。这可能吗?

HTML:

<div id="portfoliolist">
                <div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
                    <div class="portfolio-wrapper">     
                        <a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
                         <img src="images/p1.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="images/link-ico.png" alt=""/></h2>
                        </div></a>
                    </div>
                </div>              
                <div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
                    <div class="portfolio-wrapper">     
                        <a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
                         <img src="images/p2.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="images/link-ico.png" alt=""/></h2>
                        </div></a>
                    </div>
                </div>  <!----start-model-box---->
                    <a data-toggle="modal" data-target=".bs-example-modal-md" id="type1" href="#"> </a>
                    <div class="modal fade bs-example-modal-md light-box" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-md">
                        <div class="modal-content light-box-info">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><img src="images/close.png" title="close" /></button>
                         <h3>Prices</h3>
                         <p>Prices</p>
                        </div>
                      </div>
                    </div>  

最佳答案

指定data-target属性。

参见this .

关于javascript - 不同图像的不同模态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27930213/

相关文章:

javascript - 如何动态更改 Bootstrap 模态正文内容

javascript - Jquery width $(el).width() 似乎在这里失败

javascript - 在每次出现算术运算符时拆分字符串

javascript - 简单的 jQuery 动画不起作用

jquery - fancybox 2.0.6 ie7 不工作

bootstrap-4 - 如何修复引导模式不透明度错误?

angularjs - Angular-UI Bootstrap 模态网格行列宽度不正确

JavaScript .sort 覆盖

javascript - 使用 peg.js 进行反向引用

php - 从 EntityType Symfony 获取值