Copy link to clipboard
Copied
Good morning - I have a client that wants an overlay, onto an existing image, that is triggered by a drop down menu link. Any ideas if and how this can be done in Dreamweaver 19.2?
Copy link to clipboard
Copied
You will need an onclick event as the trigger.
Copy link to clipboard
Copied
Something along the lines of, say, an AP div with a background image that is then filled with an img tag upon the menu selection, then is empty (displaying the background image) if the default first value is selected?
As per BenPleysier​, the menu would need an onClick event to handle the DOM changes.
Or were you thinking of something else?
V/r,
^ _ ^
Copy link to clipboard
Copied
AP DIVs are no longer available in DW CC 19.2
Copy link to clipboard
Copied
I've never used any of Dw features to create an AP div. I hard-code those. Actually, I hard-code 95% of my stuff, using only Dw's autocomplete for tag attributes.
V/r,
^ _ ^
Copy link to clipboard
Copied
Are you using Bootstrap? You could make an onClick event trigger from a button and open a modal window overlay.
<!doctype html >
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Modal Window</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link href="css/bootstrap-4.2.1.css" rel="stylesheet" type="text/css">
<style>
/**Make footer hug screen bottom**/
body { height: 100vh; }
.flex-grow { flex: 1 0 auto; }
</style>
</head>
<body class="d-flex flex-column">
<div class="container flex-grow">
<div class="jumbotron">
<h1 class="p2">Bootstrap 4 Modal</h1>
<p>This demo uses version 4.2.1 but will work with any 4x version in your site folder. Adjust your code accordingly. </p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"> CLICK ME! </button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body"> Your modal content here... <img class="img-fluid" src="https://placeimg.com/500/400/nature" alt="placeholder"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container-fluid">
<div class="row">
<footer class="col py-4 bg-dark text-white-50"> © 2019 Your Website all rights reserved. </footer>
</div>
</div>
<!--jQuery first, then popper then Bootstrap-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.2.1.js"></script>
</body>
</html>