当前位置: 首页 > 知识库问答 >
问题:

为不同的图像按钮显示不同的弹出窗口

长孙和悦
2023-03-14

我在制作这个项目网站的时候,突然想到要制作一个弹出框来显示产品的描述。当我制作弹出式消息框时,它会出现在单击不同的图像时,我看到它会显示不同产品的相同消息,即使在对每种产品给出不同的描述之后也是如此。我不太懂JavaScript,但我想必须在那里添加一些代码。

这里是代码-

$(".modal-trigger").click(function(e){
  e.preventDefault();
  dataModal = $(this).attr("data-modal");
  $("#" + dataModal).css({"display":"block"});
  // $("body").css({"overflow-y": "hidden"}); //Prevent double scrollbar.
});

$(".close-modal, .modal-sandbox").click(function(){
  $(".modal").css({"display":"none"});
  // $("body").css({"overflow-y": "auto"}); //Prevent double scrollbar.
});
.modal,
.modal-box {
  z-index: 900;
}

.modal-sandbox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
}

.modal {
  display: none; 
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgb(0,0,0);
  background: rgba(0,0,0,.8);
  overflow: auto;
}

.modal-box {
  position: relative;
  width: 80%;
  max-width: 920px;
  margin: 100px auto;
  animation-name: modalbox;
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(0,0,.3,1.6);
}

.modal-header {
  padding: 20px 40px;
  background: #546E7A;
  color: #ffffff;
}

.modal-body {
  background: #ECEFF1;
  padding: 60px 40px;
}

/* Close Button */
.close-modal {
  text-align: right;
  cursor: pointer;
}

/* Animation */
@-webkit-keyframes modalbox {
  0% {
    top: -250px; 
    opacity: 0;
  }
  100% {
    top: 0; 
    opacity: 1;
  }
}

@keyframes modalbox {
  0% {
    top: -250px; 
    opacity: 0;
  }
  100% {
    top: 0; 
    opacity: 1;
  }
}

.modal-trigger, button {
  top: 100%;
  left: 100%;
  padding: 20px 40px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
}

.modal-trigger {
  position: absolute;
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: ease .2s;
}

button {
  border: 1px solid #333333;
  outline: none;
  color: #333333;
}

.modal-trigger:hover {
  padding: 20px 60px;
}
<body>
  <div class="services-container container-fluid">
        <div class="container sess-in-cont">
            <div class="session-title row">
                <h2>Our Services</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis magna odio, eu vehicula augue suscipit ac. Pellentesque quis dui lorem. </p>
            </div>
            <div class="sess-row row">
                <div class="col-md-4">
                    <div class="serv-det">
                        <figure class="imghvr-fade">
                            <img src="assets/images/services/s1.jpg" alt="">
                            <figcaption>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis magna odio, eu vehicula augue suscipit ac. Pellentesque quis dui lorem. Vestibulum sed blandit diam,
                                <a href="#" class="modal-trigger" data-modal="modal-name">Modal open!</a>
                            </figcaption>
                        </figure>
                        <h6>Telecom</h6>
                    </div>
                </div>
                <div class="modal" id="modal-name">
                    <div class="modal-sandbox"></div>
                    <div class="modal-box">
                        <div class="modal-header">
                            <div class="close-modal">&#10006;</div> 
                            <h1>ex1</h1>
                        </div>
                        <div class="modal-body">
                            <p>Product 1 Description 1</p>
                            <p>This is first product description</p>
                            <br />
                            <button class="close-modal">Close!</button>
                        </div>
                    </div>
                </div>
                  
                <div class="col-md-4">
                    <div class="serv-det">
                        <figure class="imghvr-fade">
                            <img src="assets/images/services/s2.jpg" alt="">
                            <figcaption>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis magna odio, eu vehicula augue suscipit ac. Pellentesque quis dui lorem. Vestibulum sed blandit diam,
                                <a href="#" class="modal-trigger" data-modal="modal-name">Modal open!</a>
                            </figcaption>
                        </figure>
                        <h6>Networking</h6>
                    </div>
                </div>
                <div class="modal" id="modal-name">
                    <div class="modal-sandbox"></div>
                    <div class="modal-box">
                        <div class="modal-header">
                            <div class="close-modal">&#10006;</div> 
                            <h1>ex2</h1>
                        </div>
                        <div class="modal-body">
                            <p>Product 2 Decription 2</p>
                            <p>This is second description</p>
                            <br />
                            <button class="close-modal">Close!      </button>
                        </div>
                    </div>
                </div>
</body>

这是我从codepen中获取的模板。木卫一。

共有1个答案

姜良哲
2023-03-14

通过它显示的错误,您可以确定您没有包含jQuery。$是jQuery的一个类,所以如果没有定义,就没有jQuery。

如果您不知道如何包含jQuery,请在脚本标记之前插入以下代码:

 类似资料:
  • 我(目前)有三个按钮 使用这些按钮,我想显示不同的菜单/覆盖。覆盖图如下所示: 这方面的JS是: 我的问题是只有菜单1正在显示。脚本可以正常工作,但是menu2和menu3没有显示。 我想这一定是缺少的东西。也许是a$(this)什么的(对不起我的JS已经不是以前的样子了)。我在中循环,然后从google chrome dev中点击了“Right”按钮(我想,很难说出来)。 预期结果:如果我按下按

  • 我想在JavaFX中创建特定的组件。在 onClick 事件后显示 poupup 的按钮。 情景: > < li> 我们单击按钮 弹出显示下面的按钮(如图片上所示)

  • 我在sencha touch 2中创建了一个索引页面,在其中我在容器内创建了一些自定义按钮 这些按钮看起来像这个 单击橙色按钮后,我想显示一个新视图。 我尝试了ext.Navigation view,但它不是我想要的。我必须在按钮上添加一个事件监听器,还是我必须做一些其他事情请建议 我在controller文件夹main.js中创建了一个新控制器 还有我的新视图Eligibelity.js代码 还

  • 我能找到的每个更改按钮图像的示例都显示了当单击该按钮时如何更改它。但是我如何点击一个切换按钮,并让它改变一个常规按钮的图像呢? 关于更多细节,我有两个按钮和一个onCheckedChanged事件: 当按下切换按钮并发生onCheckedChanged事件时,我需要将btn1的背景设置为新图像。

  • 问题内容: 我正在尝试使用wunderground的api,Leaflet和Cloudmade将天气图标显示在地图标记中。我已经显示了文本和带有图标图像的变量,但是我不确定如何显示它。这是我的代码: 我尝试了一下但没有成功: 有什么建议? 问题答案: 标记的bindPopup方法仅将HTML内容作为字符串,因此您还需要在标记周围加上引号-类似于 应该为您工作。

  • 本文向大家介绍Python 多个图同时在不同窗口显示的实现方法,包括了Python 多个图同时在不同窗口显示的实现方法的使用技巧和注意事项,需要的朋友参考一下 Python的matplotlib包可以轻松的将数据可视化,博主最近遇到了一个问题,博主想同时在两个窗口展示两张图,但是代码运行结果总是显示一张图,把当前的图删掉之后才能显示另一张图。网上找了一些解决方案都是把它们放在一个窗口中,两个图片分