Вопросы Теги

переопределите overflow:hidden с z-индексом

Использую coda_bubble плагин jQuery, и я должен сделать свой пузырь всплывающим в переполнении, скрытое отделение здесь является моим примером кода.

<html>
<head>
<title>Override overflow:hidden</title>
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>
<script type="text/javascript">
$(function(){
   opts = {
      distances : [40,40],
      leftShifts : [0,0],
      bubbleTimes : [400,400],
      hideDelays : [0,0],
      bubbleWidths : [200,200],
      bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER",
      msieFix : true
   };
   $('.coda_bubble').codaBubble(opts);
});
</script> 
<style type="text/css">
body{
    margin:0;
    padding:0;
    }
#wrapper{
    width:300px;
    margin:200px auto;
    }
.overflow{
    width:120px;
    height:80px;
    overflow:hidden;
    float:left;
    }
.coda_bubble{
    z-index:100;/****NOT WORKING*******/
    }
</style>
</head>

<body>
<div id="wrapper">
    <div class="overflow">
       <div class="coda_bubble">
            <div>
                <p class="trigger">Trigger Bubble</p>
            </div>
            <div class="bubble_html">
               [BUBBLE CONTENT]
            </div>
        </div>
    </div>
    <div class="overflow" style="overflow: visible;">
       <div class="coda_bubble">
            <div>
                <p class="trigger">Trigger Bubble</p>
            </div>
            <div class="bubble_html">
               [BUBBLE CONTENT]
            </div>
        </div>
    </div>
</div>
</body>
</html>
12
задан skaffman 23 December 2009 в 11:59
поделиться

3 ответа

Полагаю, вам не нужно, чтобы .coda_bubble был потомком .overflow. Если нет, то передвиньте его и создайте позиционирующий div, чтобы удержать обоих детей.

<html>
<head>
<title>Override overflow:hidden</title>
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>
<script type="text/javascript">
$(function(){
   opts = {
      distances : [40,40],
      leftShifts : [0,0],
      bubbleTimes : [400,400],
      hideDelays : [0,0],
      bubbleWidths : [200,200],
      bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER",
      msieFix : true
   };
   $('.coda_bubble').codaBubble(opts);
});
</script> 
<style type="text/css">
body{
    margin:0;
    padding:0;
    }
#wrapper{
    width:300px;
    margin:200px auto;
    }
.overflow{
    overflow:hidden;
    width:120px;
    height:80px;
    position:absolute; /*May not be needed.*/
    }
.position {
    width:120px;
    height:80px;
    float:left;
}
.coda_bubble{
    /*z-index:100;/****NOT WORKING*******/
    }
</style>
</head>

<body>
<div id="wrapper">
    <div class="position">
        <div class="overflow">
           [overflow content]
        </div>
        <div class="coda_bubble">
            <div>
                <p class="trigger">Trigger Bubble</p>
            </div>
            <div class="bubble_html">
               [BUBBLE CONTENT]
            </div>
        </div>
    </div>

    <div class="position">
        <div class="overflow" style="overflow:">
           [overflow content]
        </div>
        <div class="coda_bubble">
            <div>
                <p class="trigger">Trigger Bubble</p>
            </div>
            <div class="bubble_html">
               [BUBBLE CONTENT]
            </div>
        </div>
    </div>
</div>
</body>
</html>
3
ответ дан 2 December 2019 в 03:25
поделиться

Свойство z-индекса относится к тем элементам, положение которых установлено в абсолютное. Попробуйте вместо этого css:

.coda_bubble{
  position:absolute;
  z-index:100;/****NOT WORKING*******/
}
-1
ответ дан 2 December 2019 в 03:25
поделиться

Я не знаю, существует ли собственный, блокирующий конкретный механизм для этого, но моя первая подсказка состоит в том, чтобы дать таблице столбец состояния (например, заблокирован ) и настройка это 1 при блокировке строки. выберите , чтобы добавить условие WHERE locked! = '1' в любой запрос.

С другой стороны, я не знаю, что вы делаете, но разве это не задача, которая должна быть выполнена на уровне или два выше ядра базы данных?

-121--3643212-

Айв обнаружил, что с большим количеством плагинов методы защищены/приватны (т.е. в области закрытия). Если вам нужно изменить функциональность методов/функций, то вам не повезло, если вы не хотите его раскошелиться. Теперь, если вам не нужно менять какие-либо из этих методов/функций, то вы можете использовать $ .extend ($ .fn.pluginName, {/* ваши методы/свойства */};

Еще одна вещь, которую вы в итоге сделали раньше, это просто использовать плагин в качестве свойства моего плагина, а не пытаться расширить его.

Все это на самом деле сводится к тому, как плагин, который вы хотите расширить, кодируется.

-121--844076-

Невозможно. переполнение: скрытие; Скрытие содержимого вне элемента. Период.

z-индекс применяется к абсолютным И относительно позиционированным элементам, просто иначе, несмотря на то, что сказал кто-то другой.

ПРАВКА Вы могли бы положить какую-нибудь набивку на этот конкретный div, если вы можете жить с этой набивкой, то есть. Див тоже должен быть немного шире.

ИЗМЕНИТЬ 2 Как заявили другие, хотя положение: относительное; и положение: абсолютное; вероятно, более распространены, да, z-индекс работает с позицией: фиксировано; также, только не для положения: статический; Я их упустил из виду.

15
ответ дан 2 December 2019 в 03:25
поделиться