<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:crimson;
border: 2px solid brown;
color: white;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialg" ).dialog({
autoOpen: false,
hide: "slide",
show : "slide",
width: 450,
height: 600
});
$( "#opener" ).click(function() {
$( "#dialg" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialg" title="Pizza">
<div id="dialg">
<b>Size</b>
<br>
<select>
<option>Personal (6'') £3.99</option>
<option>Regular (9'') £8.99</option>
<option>Large (12'') £15.99</option>
<option>Extra Large (15'') £17.99</option>
</select>
</div>
<div id="dialg">
<b>Crust</b>
<br>
<select>
<option>Standard</option>
<option>Thin ( Extra crispy & Extra Cooked</option>
<option>Cheese Crust</option>
</select>
</div>
<div id="dialg">
<b>Topings</b>
<br>
<input type="checkbox" id="toppings1" name="toppings1" value="Anchovies">
<label for="toppings1"> Anchovies(+£0.50)</label><br>
<input type="checkbox" id="toppings2" name="toppings2" value="Bacon">
<label for="toppings2"> Bacon(+£0.50)</label><br>
<input type="checkbox" id="toppings3" name="toppings3" value="BBQ">
<label for="toppings3"> BBQ(+£0.50)</label><br>
<input type="checkbox" id="toppings4" name="toppings4" value="Chargills chicken">
<label for="toppings4"> Chargills chicken(+£0.50)</label><br>
<input type="checkbox" id="toppings5" name="toppings5" value="Chicken tikka strips">
<label for="toppings5"> Chicken tikka strips(+£0.50)</label><br>
<input type="checkbox" id="toppings6" name="toppings6" value="Black olives">
<label for="toppings6"> Black olives(+£0.50)</label><br>
<input type="checkbox" id="toppings7" name="toppings7" value="Sweetcorn">
<label for="toppings8"> Sweetcorn(+£0.50)</label><br>
<input type="checkbox" id="toppings8" name="toppings8" value="Tuna">
<label for="toppings8"> Tuna(+£0.50)</label><br>
</div>
<div style="align-content: center;">
<button style="background-color: red;">
ADD TO CART
</button>
</div>
</div>
<button id="opener">Open Box</button>
</body>
</html> 
Shopping Cart