Question

我试图在bootstrap中使用JavaScript，DOM和Array创建动态内容。这是一个想法：我们有一个静态图像和文本（请注意文本是允许的，或者只是＆＃34;这个＆＃34;图像）点击该区域的任何地方（图像和文本所在的位置）显示一个弹出窗口。此弹出框包含显示不同图像和不同文本的项目网格。单击此图像可更改静态图像。 Exp：单击包含图像2文本2的区域将图像1文本1更改为图像2文本2。我试图创建一个网格内容，对弹出域内的点击事件作出反应。

任何想法，可以帮助我的任何事情都会受到欢迎。忘了提及我在bootstrap中的新手，我也是JS的初学者。但我是一个优秀的程序员（Java，Python，Haskel，C＃......）

由于我是新来的，无法发布代码或图片，请留言以获取更多详情。

Answer 1

我在bootstrap中使用了popovers，但格式化起来很棘手。第一个参考

This documentation

包含属性data-html =“true”非常重要，否则无法在popover中格式化内容。这也是一个有效的demo。

这也是一个有效的JS Fiddle

您的代码应该是这样的。希望这对你有用！

的jQuery

$(function ()
 { $(".tip").popover();
 });

//HIDES POPOVER ON CLICK OUTSIDE

 $('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
    $('.popover').each(function(){
        $(this.previousSibling).popover('hide');
    });
  }
});

HTML

    <div ><a href="#" class="tip" rel="popover" data-trigger="click"  data-html="true" 
    data-content="Yadda Yadda.<P><P><P><P>More stuff on another line" 
   data-original-title="Your popover title">
   <span style="cursor:pointer;">Text and images here</span></a></div>

带有网格项的Bootstrap popover，单击时会更改

1 个答案: