Шаблон CSS и js, откройте окно в том же окне
Я сделал скачать:
https://www.free-css.com/free-css-templates/page238/resume
Под "моими проектами" есть изображения, при нажатии на которые открывается новое окно, но с той же стороны. Но при нажатии на другое изображение открывается та же страница. Я хочу делать разные страницы с разными изображениями. Я попытался изменить "id" на test01 на "странице" и href "#test01". Но это не сработает, если я не использую оригинальный "Animatedmodular".
Как сделать несколько "всплывающих окон", но в одном окне?
Я не знаю, сделал ли я это правильно. Я пытался заставить скрипт работать с изображениями. Но если вы посмотрите на "Live Demo", прокрутите вниз и нажмете "Макеты в секундах", а затем "Плавающие макеты", они оба откроют одно и то же окно, я хочу, чтобы они были "связаны" с другим окном. Я хочу, чтобы второе изображение открывало "". Я надеюсь, что кто-то понимает сценарий, что я хотел сделать и как это исправить. Я не делал домашние страницы с 90-х годов. Поэтому я рад за любую помощь, которую я могу получить.:)
.animatedModal-on .close-popup-modal {
opacity: 1;
} <!-- single work -->
<div class="col-md-4 col-sm-6 fashion logo">
<a id="demo01" href="#animatedModal" class="portfolio_item"> <img src="img/22-00.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"> <span>test.</span> <em>test </em> </div>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#demo2" class="portfolio_item"> <img src="img/19-00.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"> <span>test</em> </div>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work -->
<div class="col-md-4 col-sm-6 photography">
<a id="demo03" href="#03korsett" class="portfolio_item"> <img src="img/01-00.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"> <span>test</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!--DEMO01-->
<div id="animatedModal" class="popup-modal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div>
<div class="clearfix"></div>
<div class="modal-content">
<div class="container">
<div class="portfolio-padding">
<div class="col-md-8 col-md-offset-2">
<h2>Vtest</h2>
<div class="h-50"></div>
<p>test</p>
<br />
<br /> <img src="img/22-00.jpg" alt="" class="img-responsive" />
<br />
<br />
<p>Atest</p>
<br />
<br /> </div>
</div>
</div>
</div>
</div>
<!--DEMO02-->
<div id="demo2" class="popup-modal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-demo2" class="close-demo2 close-demo2"> <i class="ion-close-round"></i> </div>
<div class="clearfix"></div>
<div class="modal-content">
<div class="container">
<div class="portfolio-padding">
<div class="col-md-8 col-md-offset-2">
<h2>Vtest</h2>
<div class="h-50"></div>
<p>test</p>
<br />
<br /> <img src="img/22-00.jpg" alt="" class="img-responsive" />
<br />
<br />
<p>Atest</p>
<br />
<br /> </div>
</div>
</div>
</div>
</div>1 ответ
$(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>Если вы используете предоставленные классы и идентификаторы, jQuery будет перебирать различные элементы формы и сопоставлять их с соответствующими всплывающими окнами.
Используйте entry-r1, entry-r2 и т. Д. В качестве идентификатора для полей ввода. Используйте lookup-r1, lookup-r2 и т. Д. В качестве идентификатора для соответствующего всплывающего окна. Используйте form-r1, form-r2 и т. Д. В качестве идентификатора для формы в всплывающем окне поиска.
Вам нужно добавить идентификатор вашего нового модального окна в свой css:
.animatedModal-on .demo2-on .close-popup-modal {
opacity: 1;
}
и в вашем custom.js вам нужно определить свой модальный тег следующим образом:
$("#demo02").animatedModal({
modalTarget: "demo2"
});