大家好,我想让我的代码做的就是每次打开一个模态窗口 我点击一个名称的链接,该模式窗口应打开 该名称的详细信息,但没有发生!而只是一个 链接是第一个链接可以打开模态窗口,但与 错误的细节,列表中姓氏的详细信息。其他名字 链接不打开模态窗口,我不知道我在做什么 错误!以下是代码;
我遗漏了代码的CSS
{{extend 'layout.html'}}
...............
................
...............
<script>
$(document).ready(function(){
$('#guardian').click(function() {
//$(this).click(function(){
var hiddenSection = $('#regDetails');
hiddenSection.fadeIn()
// unhide section.hidden
.css({ 'display':'block' })
// set to full screen
.css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
.css({ top:($(window).height() - hiddenSection.height())/2 + 'px',
left:($(window).width() - hiddenSection.width())/2 + 'px' })
// greyed out background
.css({ 'background-color': 'rgba(0,0,0,0.6)' })
.appendTo('body');
// console.log($(window).width() + ' - ' + $(window).height());
$('img#close').click(function(){ $(hiddenSection).fadeOut(); });
//});
});
});
</script>
<div id="letterhead">
{{for head in head:}}
<div class="details">
<img width="220px" height="200px" src="{{=URL('download', args=head.school_logo)}}" style="border: solid white 2px; border-radius: 5px;"/><br />
</div>
<div class="details" style="padding-left: 10px;">
<h1>
{{=head.school_name}}
</h1><br />
{{=head.Telephone}}<br />
{{=head.Fax}}<br/>
{{=head.Email}}<br />
<h3>
STUDENTS RESULTS MANAGEMENT SYSTEM (SRMS v1)
</h3>
</div>
</div>
{{pass}}
<div id='container'>
<h3>
SELECT STUDENT AND OR GUARDIAN VIEW THEIR PROFILE
</h3>
<table>
<tr>
<th>STUDENT</th>
<th>CLASS</th>
<th>GUARDIAN</th>
</tr>
{{for student in student:}}
<tr>
<td>{{=A('view', _class="glyphicon glyphicon-user", _href=URL('student_profile', args=student.id))}} |
{{=student.surname}} {{=student.name}}</td>
<td>{{=student.class_name.class_name}}</td>
下面的链接是指点击时应该使用相关名称的相关详细信息建立模式窗口
<td><a href="#" class="glyphicon glyphicon-user" id="guardian">View | {{=student.guardian.surname}}</a></td>
{{pass}}
</tr>
</table>
<div id="regDetails">
<article class="popup">
<a href="#"><img src="{{=URL('static', 'images/close.png')}}" style="width: 50px; position: absolute; top:0px;left:0px;" id="close"/></a>
<div style="margin-left: 5px;">
<center>
<legend style="color: white;"><b>GUARDIAN DETAILS</b></legend>
FULL NAMES: {{=student.guardian.surname}} {{=student.guardian.name}}<br />
CONTACT DETAILS: {{=student.guardian.contact_number}}<br />
<hr />
<textarea rows="7" cols="40" id="message" placeholder="Notify Guardian Via Text Message" style="color: black; border: solid 1px white; border-radius: 5px;"></textarea><br />
<hr />
<button type="button" style="border: solid 1px white; border-radius: 5px;">Send</button><button type="button" id="clear" style="border: solid 1px white; border-radius: 5px;">Clear</button>
</center>
<script>
jQuery('#clear').click(function(){
document.getElementById('message').value='';
});
</script>
</div>
</article>
</div>
</div>