- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我找到了一个将 xml 数据加载到弹出框的代码。我尝试分享弹出框的 URL。但代码不支持分享URL。当尝试在新选项卡中打开弹出窗口的 URL 时,需要直接显示弹出窗口。我怎样才能实现代码?
这是我找到的代码。
$(document).ready(function(){
$.ajax({
type:"GET",
url:"data.xml",
dataType:"xml",
success:xmlParser
});
});
function xmlParser(xml){
xml = $(xml).children();
let total = $(xml).children().length;
$(xml).children().each(function (idx) {
let tag = $(this).prop("tagName");
let nextIdx = idx + 1;
let prevIdx = idx - 1;
//to make cyclic
nextIdx = nextIdx == total ? 0 : nextIdx;
prevIdx = prevIdx == -1 ? (total -1) : prevIdx;
let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';
let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';
let head = '<div>' + $(this).find("head").text() + '</div>';
let html = `<div class="col-sm-4 random" id="random">
<div class="thumbnail randomdiv3" id="border" >
<a href="#${tag + idx}" id="openModalBtn">
<div>${image}</div>
<h5>${head}</h5>
</a>
</div>
</div>`;
let popup = `<div id="${tag + idx}" class="overlay">
<div class="popup">
<a href="#${tag + prevIdx}" class="previous round">‹</a>
<a href="#${tag + nextIdx}" class="next round">›</a>
<h6>${head}</h6>
<a class="close" href="#">×</a>
<div>${image2}</div>
</div>
</div>`;
$("#xmldata").append(html);
$("#popup").append(popup);
});
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 2s ease-in-out;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
.thumbnail img {
width: 100%;
height: 272px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 20%;
vertical-align: middle;
position: inherit;
}
.previous {
background-color: #000;
color: white;
padding: 8px 16px;
}
.next {
background-color: #000;
color: white;
padding: 8px 16px;
}
.round {
border-radius: 50%;
}
<div class="row" id="xmldata"></div>
<div id="popup"></div>
http://next.plnkr.co/edit/70HUWx64QlKhfMIh?open=lib%2Fscript.js
最佳答案
您可以使用 url hash 来共享弹出 url
我已经更新了您的code请检查一下并告诉我,每次您单击链接打开弹出窗口时,它都会更新您的窗口哈希,您可以将该网址分享给任何将直接打开图像弹出窗口的人
关于javascript - 如何分享弹窗的url?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52399242/
我在用户控件内有一个带有“边框”500x500 的弹出窗口...当用户单击按钮打开此弹出窗口时,我希望边框显示在应用程序的中心(水平/垂直)而不是用户控件。 我该怎么做? 最佳答案 您可以获取根视觉对
我生成的代码有什么问题?我试图让 UIPickerView 在点击文本字段时弹出,然后在做出选择后消失。文本字段应该显示之后选择的内容。 import UIKit class CreateAJob_V
我目前正在开发一个网站。 让我叙述一下我面临的问题: 当用户打开网站时,他们会在一个小弹出窗口中看到两个选项。 弹出窗口中的第一个选项将指向子域 1 弹出窗口中的第二个选项将指向子域 2 现在我的问题
JavaScript 有三种弹窗 Alert (只有确定按钮), Confirmation (确定,取消等按钮), Prompt (有输入对话框),而且弹出的窗口是不能通过前端工具对其进行定位的,这
我希望能够在弹出窗口外单击以使其消失。 此代码运行良好 - 在打开另一个弹出窗口时关闭一个弹出窗口,当然当您再次单击该按钮时它会消失。 var $visiblePopover; $('body').o
我想看看 stackoverflow 是否使用单独的插件来执行那些亮黄色的弹出窗口,上面写着“请考虑将此答案标记为已接受 或“请考虑添加评论以说明您为什么投了反对票” 这是为此使用了一个 jquery
以下样式定义以某种方式破坏了我的屏幕并使 R 类变为红色。看截图here和 here ?android:attr/ratingB
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this qu
有没有办法绕过下面的IE弹框: The webapge you are viewing is trying to close the window. Do you want to close this
我的 iOS 应用程序出现问题:当我触摸“购买”按钮购买 IAP 产品时,弹出窗口显示此消息: This In-App purchase has already been bought. It wil
我正在 Windows 上学习 OpenCV,我正在使用 Code::bloks。当我调用 imshow() 的函数时,它会显示一个弹出窗口,其中有图像。问题是我无法缩放此窗口,因此看不到像素值。 最
我使用以下前端代码导出 .csv 文档。 HTML {% csrf_token %} DOWNLOAD JS $('#export-link').click(function(e
我是一名优秀的程序员,十分优秀!