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