我确实下载了：
https://www.free-css.com/free-css-templates/page238/resume
在“我的项目”下有图像，当按下图像时，将打开一个新窗口，但位于同一侧。但是，当单击另一张图像时，将打开同一页面。我想用不同的图像做不同的页面。我曾尝试在“页面”和href“”＃test01“上将” id“更改为test01。但是除非我使用原始的” Animatedmodular“，否则它将无法正常工作。
如何在同一个窗口中创建多个“弹出窗口”？
我不知道我是否做对了。我试图使脚本可以处理图像。但是，如果您查看“实时演示”并向下滚动并按图像“几秒钟内的模型”，然后按“浮动模型”，它们都将打开同一窗口，我希望它们被“链接”到其他窗口。我要第二张图片打开“”。我希望有人了解该脚本我想做什么以及如何解决它。自90年代以来，我一直没有做过主页。因此，我很高兴能获得所有帮助。 ：）
init.animatedModal-on .close-popup-modal {
opacity: 1;
}
答案 0 :(得分：0)
$(document).ready(function ()
{
/* get id of form to work with */
$('.show-lookup').click(function()
{
var pairedId = $(this).attr('id').split('-');
var lookupToDisplay = '#lookup-' + pairedId[1];
$('.overlay').show();
$(lookupToDisplay).show();
$('.js-popup-focus').focus();
});
/* put value selected in lookup into field in main form */
$('.lookup-popup input').on('change', function()
{
var fieldname = $(this).attr('name');
var pairedId = $(this).parent().attr('id').split('-');
var selOption = $('input[name='+fieldname+']:checked').val();
$("#entry-"+pairedId[1]).val(selOption);
});
/* for checkbox version, append selected values to field in main form */
$('.lookup-multiselect input').on('change', function()
{
var pairedId = $(this).parent().attr('id').split('-');
//event.preventDefault();
var selOptions = $(".category input:checkbox:checked").map(function(){
return $(this).val();
}).get(); // <----
//console.log(selOptions);
var selectedString = selOptions.toString();
$("#entry-"+pairedId[1]).val(selOptions);
});
$('.close-button').click(function()
{
$(this).parent().hide();
var pairedId = $(this).parent().attr('id').split('-');
$('.overlay').hide();
$("#entry-"+pairedId[1]).focus();
});
});button {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
border-radius: 2px;
border: 0;
padding: 6px;
margin: 0;
display: inline-block;
color: #fff;
background-color: #333;
position: relative;
height: 36px;
min-width: 64px;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0;
overflow: hidden;
will-change: box-shadow;
transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
line-height: 36px;
vertical-align: middle;
}
.right {
float: right;
}
.lookup-popup, .lookup-multiselect {
display: none;
z-index: 99999;
padding: 1em;
border: 1px solid #666;
border-radius: 5px;
position: absolute;
top: 6em;
left: 35%;
width: 70%;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
background: rgba(237, 237, 237, 1);
}
body {
font-family: Open Sans, Calibri, Helvetica, sans serif;
padding: 2em;
}
.overlay {
display: none;
position: fixed;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.7;
background: #333;
}
.lookup-popup {
padding: 0.5em;
display: none;
z-index: 99999;
background-color: #fff;
position: absolute;
top: 5em;
left: 25%;
width: 20%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<input type="text" class="order-entry js-initial-focus" id="entry-r1" placeholder="place" tabindex="1">
<button class="show-lookup" id="popup-r1" tabindex="2">Search</button>
</p>
<div class="overlay"> </div>
<div class="lookup-popup" id="lookup-r1">
<button class="close-button right"><i class="material-icons">close</i></button>
<strong>Select...</strong>
<form action="#" id="form-r1" name="form-r1" method="post">
<input class="js-popup-focus" type="radio" name="place" id="antwerp" value="Antwerp" tabindex="3"> <label for="antwerp">Antwerp</label><br>
<input type="radio" name="place" id="berlin" value="Berlin" tabindex="3"> <label for="berlin">Berlin</label><br>
<input type="radio" name="place" id="cairo" value="Cairo" tabindex="3"> <label for="cairo">Cairo</label><br>
<input type="radio" name="place" id="duss" value="Düsseldorf" tabindex="3"> <label for="duss">Düsseldorf</label><br>
</form>
</div>
<p>
<input type="text" class="order-entry js-initial-focus" id="entry-r2" placeholder="place" tabindex="1">
<button class="show-lookup" id="popup-r2" tabindex="2">Search</button>
</p>
<div class="overlay"> </div>
<div class="lookup-popup" id="lookup-r2">
<button class="close-button right"><i class="material-icons">close</i></button>
<strong>Select...</strong>
<form action="#" id="form-r2" name="form-r2" method="post">
<input type="radio" name="place" id="exeter" value="Exeter" tabindex="3"> <label for="exeter">Exeter</label><br>
<input type="radio" name="place" id="frankfurt" value="Frankfurt" tabindex="3"> <label for="frankfurt">Frankfurt</label><br>
<input type="radio" name="place" id="ghent" value="Ghent" tabindex="3"> <label for="ghent">Ghent</label><br>
<input class="js-popup-focus" type="radio" name="place" id="hamburg" value="Hamburg" tabindex="3"> <label for="hamburg">Hamburg</label><br>
</form>
</div>
如果您使用提供的类和id，jQuery将遍历各种表单元素并将其与各自的弹出窗口进行匹配。
使用entry-r1，entry-r2等作为输入字段的ID。使用lookup-r1，lookup-r2等作为相应弹出窗口的ID。在查找弹出窗口中，使用form-r1，form-r2等作为表单的ID。
答案 1 :(得分：0)
您必须在CSS中添加新模式的ID：
.animatedModal-on .demo2-on .close-popup-modal {
opacity: 1;
}
在您的custom.js中，您需要按以下方式定义模式标签：
$("#demo02").animatedModal({
modalTarget: "demo2"
});