Search the Community

I am working with the code from this: https://codepen.io/adventuresinmissions/pen/nrhHF I have made my own slight changes, but I am having a problem. I am getting data from a mysql table. If the page has more than one element (or row) from the table shown it will pop up the popup for each - if hitting "No" or "Cancel". I just want it to show one pop up and go away. Not go to the next pop up/row. Hope that makes sense. The Code I am Using on the Page: ECHO<<<END <script> jQuery(document).ready(function($){ //open popup $('.cd-popup-trigger$count').on('click', function(event){ event.preventDefault(); $('.cd-popup').addClass('is-visible'); }); //close popup $('.cd-popup').on('click', function(event){ if( $(event.currentTarget).is('.cd-popup-close') || $(event.currentTarget).is('.cd-popup') ) { event.preventDefault(); $(this).removeClass('is-visible'); } }); //close popup when clicking the esc keyboard button $(document).keyup(function(event){ if(event.which=='27'){ $('.cd-popup').removeClass('is-visible'); } }); }); </script> <style> .img-replace { /* replace text with an image */ display: inline-block; overflow: hidden; text-indent: 100%; color: transparent; white-space: nowrap; } .cd-popup { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(94, 110, 141, 0.9); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; } .cd-popup.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s; transition: opacity 0.3s 0s, visibility 0s 0s; } .cd-popup.show_button { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s; transition: opacity 0.3s 0s, visibility 0s 0s; display: block; height: 60px; line-height: 60px; text-transform: uppercase; color: #FFF; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-popup-container { position: relative; width: 90%; max-width: 400px; margin: 4em auto; background: #FFF; border-radius: .25em .25em .4em .4em; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); /* Force Hardware Acceleration in WebKit */ -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .cd-popup-container p { padding: 3em 1em; } .cd-popup-container .cd-buttons:after { content: ""; display: table; clear: both; } .cd-popup-container .cd-buttons li { float: left; width: 50%; list-style: none; } .cd-popup-container .cd-buttons a { display: block; height: 60px; line-height: 60px; text-transform: uppercase; color: #FFF; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-popup-container .cd-buttons li:first-child a { background: #fc7169; border-radius: 0 0 0 .25em; } .no-touch .cd-popup-container .cd-buttons li:first-child a:hover { background-color: #fc8982; } .cd-popup-container .cd-buttons li:last-child a { background: #b6bece; border-radius: 0 0 .25em 0; } .no-touch .cd-popup-container .cd-buttons li:last-child a:hover { background-color: #c5ccd8; } .cd-popup-container .cd-popup-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; } .cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after { content: ''; position: absolute; top: 12px; width: 14px; height: 3px; background-color: #8f9cb5; } .cd-popup-container .cd-popup-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 8px; } .cd-popup-container .cd-popup-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 8px; } .is-visible .cd-popup-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } @media only screen and (min-width: 1170px) { .cd-popup-container { margin: 8em auto; } } </style> END; $stmt = $mysqli->prepare("SELECT state_name FROM states WHERE state_code = ?"); $stmt->bind_param('s', $state_code); $stmt->execute(); $stmt->store_result(); $stmt->bind_result($state_name); $stmt->fetch(); $stmt->close(); $stmt2 = $mysqli->prepare("SELECT toll, crime_rate, traffic, population, city, state_code, latitude, longitude, last_updated FROM states_cities WHERE `zip` = ?"); $stmt2->bind_param('i', $zip); $stmt2->execute(); $stmt2->store_result(); $stmt2->bind_result($toll, $crime_rate, $traffic, $population, $city, $state, $lat_to, $lon_to, $last_updated); $stmt2->fetch(); $stmt2->close(); echo "<h1>$city, <a href=\"state_details.php?state=$state_code\">$state_name</a></h1>"; if ($rank >= 10) { $stmt3 = $mysqli->prepare("SELECT latitude, longitude FROM states_cities WHERE zip = ?"); $stmt3->bind_param('i', $user_zip); $stmt3->execute(); $stmt3->store_result(); $stmt3->bind_result($lat_from, $lon_from); $stmt3->fetch(); $stmt3->close(); $travel_time = get_distance($lat_to, $lat_from, $lon_to, $lon_from); echo "Distance: $travel_time[distance] | Travel Time: $travel_time[time]"; } else { $travel_time = ""; } if($rank == 20) { if ((!empty($toll))) { //Add form to EDIT FORM city information } else { //Add form to ADD FORM city information to site } } if ($rank >= 18) { echo "<center><a href=\"attractions/index.php?state=$state_code\">Add Attraction</a> | <a href=\"stores/index.php?state=$state_code\">Add Store</a></center>"; } $stmt = $mysqli->prepare("SELECT name, price, free, parking_fee, discount, hours_daily, hours_weekend, address, city, zip, attract_id FROM states_attractions WHERE (city = ? OR zip = ?) AND `state` = ?"); $stmt->bind_param('sis', $city, $zip, $state_code); $stmt->execute(); $stmt->store_result(); $num_attracts = $stmt->num_rows; $stmt->bind_result($name, $price, $free, $parking_fee, $discount, $hours_daily, $hours_weekend, $address, $city, $zip, $attract_id); if ($num_attracts >= 1) { echo "<h2>Attractions</h2>"; //$count = 0; while ($stmt->fetch()) { //$count++; if ((!empty($parking_fee)) || ($parking_fee != "0.00")) { $total = $price + $parking_fee; $show_fee = " + $$parking_fee ($$total)"; } else { $show_fee = ""; } if ($rank >= 18) { $show_admin = " | <a href=\"attractions/edit.php?id=$attract_id\">EDIT</a> | <a href=\"\" class=\"cd-popup-trigger\"><font color=\"red\">DELETE</font></a>"; echo " <div class=\"cd-popup\" role=\"alert\"> <div class=\"cd-popup-container\"> <p>Are you sure you want to delete this attraction?</p> <ul class=\"cd-buttons\"> <li><a href=\"attractions/delete.php?id=$attract_id\">Yes</a></li> <li><a href=\"#0\" class=\"cd-popup-close\">No</a></li> </ul> <a href=\"#0\" class=\"cd-popup-close img-replace\">Close</a> </div> <!-- cd-popup-container --> </div> <!-- cd-popup -->"; } else { $show_admin = ""; } if ($rank >= 10) { $show_user = " | <a href=\"addtotrip.php?id=$attract_id\">ADD TO TRIP</a>"; } else { $show_user = ""; } if (!empty($discount)) {$show_discount = " Discount: $discount";} else {$show_discount = "";} if ($free == "yes") {$final_price = "FREE";} else {$final_price = "$$price";} $url_address = urlencode($address); $url_city = urlencode($city); echo "<div class=\"link_desc\">$name_{$final_price$show_fee $show_discount | Daily Hours: $hours_daily | Weekend Hours: $hours_weekend | <a href=\"http://maps.google.com/maps?q=$url_address,+$url_city,+$zip\" target=\"_blank\">$address, $city, $zip</a>$show_user$show_admin}</div>"; } } $stmt->close();