Есть плитка -> ul li. У каждого элемента этой плитки есть свои настройки, которые можно редактировать в модальном окне. Это Название, описание и т.д. Я сделал модальное окно. Код можно найти тут
Проблема в том что открывается модальное окно первой плитки, хотя у каждой плитки есть свой html код.
Эти плитки формируются динамически - данные подгружаются из БД. У каждой плитки есть id.
Как реализовать к отдельной плитке своё модальное окно? или если возможно изменить существующее.
Часть сгенерированного кода.
<div class="browse-links clearfix">
<div class="browse-links-head clearfix">
<p>Your links</p>
<div class="switch-view">
<button class="grid grid-active"></button>
<button class="list"></button>
</div>
</div>
<div class="links-list">
<ul class="grid-view">
<li>
<div class="link-top-block">
<a href="account#settings" class="link-settings"></a>
<div id="settings" class="settings-window">
<form>
<div class="window clearfix">
<a href="account#close" title="Close" class="settings-close"></a>
<p class="settings-title">Google - Settings</p>
<div class="settings-main clearfix">
<p class="settings-desrc-title">Link description:</p>
<textarea>here desription for this link</textarea>
<div class="onoffswitch">
<input type="checkbox" name="public-switch"
class="onoffswitch-checkbox" id="public-switch">
<label class="onoffswitch-label" for="public-switch">
<span class="onoffswitch-inner"></span> <span
class="onoffswitch-switch"></span>
</label>
</div>
<label for="public-switch" class="switch-label">private link</label> <br />
<br />
<br />
<p class="switch-label-solution">you can change the access to this link</p>
</div>
<button type="submit" class="settings-delete-link" formaction="account?action=dellink&id=1" formmethod="get">Delete link</button>
<button type="submit" class="settings-save" formaction="account?action=savelink&id=1" formmethod="get">Save</button>
</div>
</form>
</div>
<a href="#" class="link-delete"></a>
</div>
<div class="link">
<a href="#" target="_blank">Google</a>
</div>
<div class="link-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure do</p>
</div>
</li>
<li>
<div class="link-top-block">
<a href="account#settings" class="link-settings"></a>
<div id="settings" class="settings-window">
<form>
<div class="window clearfix">
<a href="account#close" title="Close" class="settings-close"></a>
<p class="settings-title">yandex - Settings</p>
<div class="settings-main clearfix">
<p class="settings-desrc-title">Link description:</p>
<textarea>here desription for this link second</textarea>
<div class="onoffswitch">
<input type="checkbox" name="public-switch"
class="onoffswitch-checkbox" id="public-switch">
<label class="onoffswitch-label" for="public-switch">
<span class="onoffswitch-inner"></span> <span
class="onoffswitch-switch"></span>
</label>
</div>
<label for="public-switch" class="switch-label">private link</label> <br />
<br />
<br />
<p class="switch-label-solution">you can change the access to this link</p>
</div>
<button type="submit" class="settings-delete-link" formaction="account?action=dellink&id=1" formmethod="get">Delete link</button>
<button type="submit" class="settings-save" formaction="account?action=savelink&id=1" formmethod="get">Save</button>
</div>
</form>
</div>
<a href="#" class="link-delete"></a>
</div>
<div class="link">
<a href="#" target="_blank">Google</a>
</div>
<div class="link-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure do</p>
</div>
</li>
</ul>
</div>
</div>
ul li {
list-style-type: none;
}
/* = LINKS LIST = */
.browse-links {
width: 100% !important;
/*height: calc(90% - 115px) !important;*/
height: calc(100% - 158px - 40px) !important;
position: relative !important;
/*background-color: #1abc9c !important;*/
}
.browse-links .browse-links-head {
width: 100% !important;
height: auto !important;
}
.browse-links .browse-links-head p {
width: calc(100% - 55px) !important;
text-align: center !important;
font-size: 22px !important;
text-transform: uppercase !important;
margin: 0 0 10px 0 !important;
min-width: 112px !important;
float: left !important;
background: url("../img/back-strip.png") !important;
}
.browse-links .links-list {
width: 100% !important;
overflow: auto !important;
height: calc(100% - 30px) !important;
}
/* View switch */
.switch-view {
float: right !important;
}
.switch-view button.grid {
width: 16px;
height: 16px;
border: none;
outline: none !important;
margin: 3px 3px 3px 3px !important;
background: url("../img/grid-view.png");
}
.switch-view button.grid:hover {
cursor: pointer;
background: url("../img/grid-view-hover.png") !important;
}
.switch-view button.list {
width: 16px;
height: 16px;
border: none;
outline: none !important;
margin: 3px 3px 3px 3px !important;
background: url("../img/list-view.png");
}
.switch-view button.list:hover {
cursor: pointer;
background: url("../img/list-view-hover.png") !important;
}
.switch-view .grid-active {
background: url("../img/grid-view-active.png") !important;
}
.switch-view .list-active {
background: url("../img/list-view-active.png") !important;
}
/* grid-view */
.browse-links .links-list ul.grid-view {
margin: auto !important;
}
.browse-links .links-list ul.grid-view li {
width: 148px !important;
height: 100px !important;
margin: 6px 4px 5px 4px !important;
float: left !important;
outline: 1px solid #E6E2E2 !important;
background: #FFF !important;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-o-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
.browse-links .links-list ul.grid-view li:hover {
box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
-o-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
}
/* list-view */
.browse-links .links-list ul.list-view {
margin: auto !important;
}
.browse-links .links-list ul.list-view li {
width: 99% !important;
height: 100px !important;
margin: 6px 4px 5px 4px !important;
float: left !important;
outline: 1px solid #E6E2E2 !important;
background: #FFF !important;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-o-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
transition: none !important;
}
.browse-links .links-list ul.list-view li [class~="link"],
.browse-links .links-list ul.list-view li [class|="link"] {
transition: none !important;
}
/* .browse-links .links-list ul.list-view li:hover { */
/* box-shadow: 0 0 18px rgba(0, 0, 0, 0.5); */
/* -o-shadow: 0 0 18px rgba(0, 0, 0, 0.5); */
/* -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.5); */
/* -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.5); */
/* } */
/* end View switch */
/* Link block */
.link-top-block {
width: 100% !important;
height: 24px !important;
background: #FFF !important;
}
.link-top-block a.link-delete {
width: 16px !important;
height: 16px !important;
float: right !important;
margin: 4px !important;
background: url("../img/link-delete.png") !important;
}
.link-top-block a.link-delete:hover {
background: url("../img/link-delete-hover.png") !important;
}
.link-top-block a.link-settings {
width: 16px !important;
height: 16px !important;
float: left !important;
margin: 4px !important;
background: #333 url("../img/link-settings.png") !important;
}
.link-top-block a.link-settings:hover {
background: red url("../img/link-settings-hover.png") !important;
}
/* Settings window */
.settings-window {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
background: rgba(0, 0, 0, 0.4) !important;
z-index: 99999 !important;
opacity: 0 !important;
-webkit-transition: opacity 400ms ease-in !important;
-moz-transition: opacity 400ms ease-in !important;
transition: opacity 400ms ease-in !important;
pointer-events: none !important;
}
.settings-window:target {
opacity: 1 !important;
pointer-events: auto !important;
}
.settings-window form .window {
width: 400px !important;
max-height: 300px !important;
position: relative !important;
margin: 10% auto !important;
padding: 15px 25px 15px 15px !important;
background: #FFF !important;
}
.window p.settings-title {
padding: 3px !important;
font-size: 22px !important;
background: url("../img/back-strip.png") !important;
margin: 0 0 10px 0 !important;
}
.settings-desrc-title {
width: 100%;
font-size: 14px;
margin: 0 0 10px 0 !important;
}
.settings-main {
width: 100%;
height: 172px;
min-height: 172px;
max-height: 172px;
}
.settings-main textarea {
width: 100%;
height: 80px;
resize: none;
padding: 4px !important;
font-size: 10px;
margin: 0 0 10px 0 !important;
}
.settings-main .switch {
height: 24px;
left: 0px;
}
.settings-main p.link-status {
float: left;
top: 5px;
left: 10px;
position: relative !important;
}
.settings-main .switch-label {
top: 0px;
left: 10px;
}
.settings-main .switch-label:after {
content: "*";
color: red;
font-size: 20px;
}
.settings-main p.switch-label-solution:before {
content: "*";
color: red;
font-size: 16px;
}
.settings-main p.switch-label-solution {
font-size: 11px;
position: relative !important;
}
button.settings-delete-link {
color: #FFF;
float: left;
top: 14px;
font-size: 10px;
border: none;
position: relative !important;
text-decoration: none;
background: #E65252 !important;
padding: 6px !important;
;
display: block;
outline: none;
cursor: pointer;
}
button.settings-delete-link:hover {
background: #E83131 !important;
}
.settings-close {
width: 16px;
height: 16px;
top: 2px;
right: 2px;
text-align: center;
text-decoration: none;
position: absolute;
background: #eee url("../img/close-window.png");
}
.settings-close:hover {
background: red url("../img/close-window-hover.png");
}
button.settings-save {
float: right;
color: #FFF;
padding: 9px 21px 9px 21px !important;
border: none;
cursor: pointer;
text-transform: uppercase !important;
background: #1abc9c !important;
outline: none;
cursor: pointer;
}
button.settings-save:hover {
background: #1ED2AF !important;
}
/* end Settings window */
.browse-links .links-list ul.grid-view li .link {
width: 100% !important;
height: calc(100% - 24px) !important;
position: relative !important;
}
.browse-links .links-list ul.list-view li .link {
width: 16% !important;
float: left !important;
height: calc(100% - 24px) !important;
position: relative !important;
}
.browse-links .links-list ul.grid-view li .link-description {
display: none !important;
}
.browse-links .links-list ul.list-view li .link-description {
width: calc(100% - 16%) !important;
height: calc(100% - 24px) !important;
display: block !important;
float: right !important;
padding: 8px !important;
position: relative !important;
}
.browse-links .links-list ul.list-view li .link-description p {
font-size: 13px !important;
}
.browse-links .links-list ul li .link a {
color: #333 !important;
display: block !important;
line-height: 56px !important;
text-align: center !important;
font-size: 20px !important;
position: relative !important;
text-decoration: none !important;
text-transform: uppercase !important;
}
.browse-links .links-list ul li .link a:hover {
text-decoration: none !important;
}
/* end Link block */
<div class="browse-links clearfix">
<div class="browse-links-head clearfix">
<p>title</p>
<div class="switch-view">
<button class="grid grid-active"></button>
<button class="list"></button>
</div>
</div>
<div class="links-list">
<ul class="grid-view">
<li>
<div class="link-top-block">
<a href="#settings" class="link-settings"></a>
<div id="settings" class="settings-window">
<form>
<div class="window clearfix">
<a href="#close" title="Close" class="settings-close"></a>
<p class="settings-title">Google - Settings</p>
<div class="settings-main clearfix">
<p class="settings-desrc-title">Link description:</p>
<textarea>here desription for this link</textarea>
<div class="onoffswitch">
<input type="checkbox" name="public-switch" class="onoffswitch-checkbox" id="public-switch">
<label class="onoffswitch-label" for="public-switch">
<span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span>
</label>
</div>
<label for="public-switch" class="switch-label">private link</label>
<br />
<br />
<br />
<p class="switch-label-solution">you can change the access to this link</p>
</div>
<button type="submit" class="settings-delete-link" formaction="account?action=dellink&id=1" formmethod="get">Delete link</button>
<button type="submit" class="settings-save" formaction="account?action=savelink&id=1" formmethod="get">Save</button>
</div>
</form>
</div>
<a href="#" class="link-delete"></a>
</div>
<div class="link">
<a href="#" target="_blank">Google</a>
</div>
<div class="link-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure do</p>
</div>
</li>
<li>
<div class="link-top-block">
<a href="#settings" class="link-settings"></a>
<div id="settings" class="settings-window">
<form>
<div class="window clearfix">
<a href="account#close" title="Close" class="settings-close"></a>
<p class="settings-title">yandex - Settings</p>
<div class="settings-main clearfix">
<p clttings-desrc-title ">Link description:</p>
<textarea>here desription for this link second</textarea>
<div class="onoffswitch ">
<input type="checkbox " name="public-switch "
class="onoffswitch-checkbox " id="public-switch ">
<label class="onoffswitch-label " for="public-switch ">
<span class="onoffswitch-inner "></span> <span
class="onoffswitch-switch "></span>
</label>
</div>
<label for="public-switch " class="switch-label ">private link</label> <br />
<br />
<br />
<p class="switch-label-solution ">you can change the access to this link</p>
</div>
<button type="submit " class="settings-delete-link " formaction="account?action=dellink&id=1 " formmethod="get ">Delete link</button>
<button type="submit " class="settings-save " formaction="account?action=savelink&id=1 " formmethod="get ">Save</button>
</div>
</form>
</div>
<a href="# " class="link-delete "></a>
</div>
<div class="link ">
<a href="# " target="_blank ">Google</a>
</div>
<div class="link-description ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure do</p>
</div>
</li>
</ul>
</div>
</div>