Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
Website
implementation -
modalsUNIT 14 WEBSITE DESIGN
HND IN COMPUTING AND SYSTEMS DEVELOPMENT
How far have we got?
Pass criteria
Responsive
Use of CSS
Common style across pages
Consistent navigation
Classes
Headings
Lists
Buttons
Clickable images
Interaction
(eg shopping cart) modals
Animation
(eg carousel)
Merit/Distinction
W3C compliance
Search engine optimisation
Correct use of body text, bullets, tables, icons
Contact details
About details
Shopping cart
Payment
Site map
Copyright
Acknowledgements
What is a modal?
A JavaScript plugin that displays dialog
box/popup window on top of the current page
Built in to Bootstrap
Can contain text or images
We will add a thumbnail image to our home page
Image
Copy the kid.jpg from studshare/HND/Units/14Images into your image folder
Where will the image go?
Inside the jumbotron
The modal content
<div class="modal-content"> <!– This div defines the contents
-->
<div class="modal-body">
<img src="images/kid.jpg"> <!– The image is put in the
body -->
</div>
<div class="modal-footer"> <!– We can add a footer -->
<!– We will add a button to close the modal -->
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
How will the modal appear
<div class="modal fade" id="myModal" role="dialog"> <!–
Fades in/out-->
<div class="modal-dialog"> <!– Aids screen readers->
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<img src="images/kid.jpg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
What triggers the modal
We need to make a small version of the image
<img src="images/kid.jpg"
style="width:200px;height:150px">
The style attribute adjusts the image to those pixel
dimensions
You can adjust these to suit images with different
aspect ratios
Trigger script
<a href="#myModal" role="button" data-
toggle="modal">
This calls the modal with the ID of myModal, makes it
a button and toggles it on or off
Complete jumbotron
<div class="jumbotron">
<h2>Computing Department</h2>
<p>"The College has brilliant facilities and very helpful staff. All
the equipment was continually updated so we had the level of kit that we
needed".</p>
<p>Sean Harris - IT student</p>
<div class="container">
<a href="#myModal" role="button" data-toggle="modal">
<img src="images/kid.jpg" style="width:200px;height:150px"></a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="images/kid.jpg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
Operation
Clicking in the thumbnail fades the background and drops in
the full image
Clicking the close button, or outside the modal will close the
modal
Adding text
Simply add text inside the modal body
<div class="modal-body">
<Sean – aged 9</p>
<img src="images/kid.jpg">
</div>
Button instead of an image
<div class="container">
<button type="button" class="btn btn-info btn-lg"
data-toggle="modal" data-target="#myModal">Help ?</button>
<div class="modal fade" id="myModal"
role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>You have come to the wrong
place - try the sixth form</p>
</div>
<div class="modal-footer">
<button type="button" class="btn
btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Button help
How far have we got?
Pass criteria
Responsive
Use of CSS
Common style across pages
Consistent navigation
Classes
Headings
Lists
Buttons
Clickable images
Interaction
(eg shopping cart) modals
Animation
(eg carousel)
Merit/Distinction
W3C compliance
Search engine optimisation
Correct use of body text, bullets, tables, icons
Contact details
About details
Shopping cart
Payment
Site map
Copyright
Acknowledgements