When using a visualforce component multiple times on a page, the hover function does not open any of the dialogs. The problem seems to be related to the ids but I'm unsure about how to resolve it.
Below is an example of the code for the visualforce component:
<apex:attribute name="Contents" description="display message" type="string" required="true" assignto="{!DialogMessage}" />
<style>
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 80px;
-moz-border-radius: 15px !IMPORTANT;
border-radius: 15px !IMPORTANT;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
margin-top: -20px
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
a.ActionObject:hover#ModalBox1 {
display:inline;
}
</style>
<a id="ActionObject" >
<img src="/s.gif" />
<div id="ModalBox1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p><center>{!DialogMessage}</center></p>
</div>
</div>
</a>
The problematic part lies in:
a.ActionObject:hover#ModalBox1 {
display:inline;
}
I've attempted using JavaScript and tried various CSS methods such as using ~, but none have proven successful. If using JavaScript, there needs to be a way for it to identify the correct Id to determine which component to display.