Javascript 单击div，显示具有图像和文本的模式（覆盖在模板上）并用作幻灯片

我试图使这个div类“box-1”在有人点击它时弹出一个模态。在模态中，将有一个标题、一个图像和一些文本显示在模态中

<div class="container">
        <div class="row">
          <div class="grid_12">
            <h2 class=" wow fadeInUp" style="color: #000; font-weight: bold;">Lorem Ipsum</h2>
                <div class="row">
          <div class="grid_3">
            <div class="box-1 wow fadeInDown">
              <span class="skill-number" data-from="0" data-to="8" data-speed="0.5" ></span>
              <span class="skill-title">performance Awards </span>
            </div>
          </div>
          <div class="grid_3">
            <div class="box-1 wow fadeInDown">
              <span class="skill-number" data-from="0" data-to="8" data-speed="0.5" ></span>
              <span class="skill-title">performance Awards </span>
            </div>
          </div>
           <div class="grid_3">
            <div class="box-1 wow fadeInDown">
              <span class="skill-number" data-from="0" data-to="8" data-speed="0.5" ></span>
              <span class="skill-title">performance Awards </span>
            </div>
          </div>
        </div>
       </div>
      </div>
     </div>

乱数假文
业绩奖
业绩奖
业绩奖

我尝试过的代码可以独立工作，但是当我把它放在模板代码中时，如果它工作，所有其他代码都会中断。我正试图使统计部分“box-1”类div和“service box”div作为一个模式工作

下面是一些我尝试过但在模板上不起作用的链接。[jQuery弹出式覆盖图][2]