1. Website implementation - modals
Unit 14 Website Design
HND in Computing and Systems Development

2. How far have we got? Pass criteria Merit/Distinction 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

3. 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

4. Image
Copy the kid.jpg from studshare/HND/Units/14Images into your image folder

5. Where will the image go?
Inside the jumbotron

6. 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>

7. 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>

8. 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

9. 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

10. 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>

11. 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

12. Adding text Simply add text inside the modal body
<div class="modal-body">
<Sean – aged 9</p>
<img src="images/kid.jpg">
</div>

13. 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>

14. Button help

15. How far have we got? Pass criteria Merit/Distinction 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