diff --git a/WebContent/html/css/stylesheet.css b/WebContent/html/css/stylesheet.css index c6e2cb0..8a50290 100644 --- a/WebContent/html/css/stylesheet.css +++ b/WebContent/html/css/stylesheet.css @@ -28,6 +28,54 @@ div.displayDevice{ left: 300px; } +div.modal{ + display:none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.4); +} + +div.modal-content{ + position: relative; + background-color: #fefefe; + margin: 5% auto; + padding: 10px; + border: 1px solid #888; + width: 80%; + max-height: 80%; + text-align: center; + vertical-align: center; + align-items: center; +} + +div.modal-body{ + padding: 10px; + overflow: auto; +} + +input[type=text]{ + width: 60%; +} + + +span.close{ + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} +span.close:hover, +span.close:focus{ + color: black; + text-decoration: none; + cursor: pointer; +} ul.nav{ padding: 0px; } diff --git a/WebContent/html/javascript/shoppingCart.js b/WebContent/html/javascript/shoppingCart.js index b2d3f17..ff47c6a 100644 --- a/WebContent/html/javascript/shoppingCart.js +++ b/WebContent/html/javascript/shoppingCart.js @@ -52,11 +52,15 @@ var devices = [dev1, dev2, dev3, dev4, dev5, dev6]; //put them all into var checked = new Array; //this is the array that will indicate whether a shopping cart item is checked off or not //adding event listeners to all the options, such as ordering and deleting -document.getElementById('os').addEventListener('click',orderSelected); +document.getElementById('os').addEventListener('click',showPopup); document.getElementById('ds').addEventListener('click',deleteSelected); -document.getElementById('oa').addEventListener('click',orderAll); +document.getElementById('oa').addEventListener('click',showPopup); document.getElementById('da').addEventListener('click',deleteAll); +// Shipping form popup--------------------- +var orderForm = document.getElementById('orderInfoModal'); +var orderFormCloseButton = document.getElementById('closeOrderForm'); +orderFormCloseButton.addEventListener('click',hidePopup); show(); //on load, we want to show everything function getCartItems(){ @@ -144,6 +148,13 @@ function changeStatus(){ /** This function takes all the devices we selected and simulates an order on them. **/ +function showPopup(){ + orderForm.style.display = "block"; +} +function hidePopup(){ + orderForm.style.display = "none"; +} + function orderSelected(){ var response = confirm("Are you sure you'd like to order the selected items?"); if(response == true){ //if they confirm diff --git a/WebContent/html/webpages/shoppingCart.html b/WebContent/html/webpages/shoppingCart.html index 07dfc6c..a2768b4 100644 --- a/WebContent/html/webpages/shoppingCart.html +++ b/WebContent/html/webpages/shoppingCart.html @@ -1,66 +1,90 @@ - - - - - - - + + + + + + + - Synchrony Financial + Synchrony Financial - - - - - + + + + + - - - - - + -
- -
+ + +