Presentation is loading. Please wait.

Presentation is loading. Please wait.

Website implementation - modals

Similar presentations


Presentation on theme: "Website implementation - modals"— Presentation transcript:

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


Download ppt "Website implementation - modals"

Similar presentations


Ads by Google