时间戳

首页 > 解决方案 > 向页面添加多个 visualforce 组件时出现问题

css - 向页面添加多个 visualforce 组件时出现问题

问题描述

我在页面上多次使用 visualforce 组件，但悬停不会打开任何对话框。我想这是由于 ids 但我不知道该怎么做才能解决。

这是visualforce组件的代码示例

<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">&times;</span>
                <p><center>{!DialogMessage}</center></p>
            </div>
        
        </div>
    </a>

The part that is the issue is 
        a.ActionObject:hover#ModalBox1 {
            display:inline;
        }

我尝试过使用 javascript 并在 css 中使用了不同的方法，例如使用 ~ 等，但没有任何效果

标签： csscomponentsvisualforce

解决方案

几个你必须玩的想法。

  1. a.ActionObject:hover#ModalBox1不会匹配。您没有任何具有“ActionObject”类的东西，您有带有 id ( <a id="ActionObject" >) 的元素。

  2. 您必须检查生成的 html，您可能是 VF 将您的 ID 修改为类似j_id0:j_id1:j_id3:j_id58:ModalBox1（从顶部生成，<apex:page>如果存在的 ID，否则自动生成的 ID。然后是冒号和 DOM 树中下一个元素的 ID）的受害者. 看看这是否有帮助：https ://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_styling_custom_using_component_id.htm

  3. 一定要使用身份证吗？如果您有其他独特的东西，您可以将记录的 ID 添加为class？或“数据”元素

  4. 或者有一个神奇的全局变量{!$Component}，你可以用它来获取正确元素的 id。放弃 CSS 解决方案，取而代之的是<a onmouseover="show('{!$Component}')" onmouseleave="hide('{!$Component}')">

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_access.htm https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages /pages_best_practices_accessing_id.htm

推荐阅读