Как изменить свойство стиля CSS моего модального всплывающего окна

Question

У меня есть этот jQuery bpopup momadal, который я хочу установить относительно координат щелчка мыши. я могу захватить шнур и передать их в таблицу стилей или даже когда я их явно кодирую, модальность, похоже, не поддерживает свойство принадлежности.

Пожалуйста, проверьте JS fidle модальной, что я использую по этой ссылке: http://jsfiddle.net/24a9b/

#element_to_pop_up { 
    background-color:#fff; 
    border-radius:15px; 
    color:#000; 
    display:none; 
    padding:20px; 
    min-width:400px; 
    min-height: 180px; 
} 
.bClose{ 
    cursor:pointer; 
    position:absolute; 
    right:10px; 
    top:5px; 
} 

Я хочу использовать «верх» и «левый» свойства стиля. но кажется, что этот модаль имеет центр в качестве записи по умолчанию в своей библиотеке, которую вы также можете проверить по этой ссылке. Пожалуйста, любая помощь будет высоко оценена.

Answer 1

библиотека, которую вы использовали для создания этого всплывающего модальнога устанавливает модальную в центре путем вычисления top и left стилей динамически и затем применяет их к элементу в виде стилей рядного CSS.

Поэтому, если вы хотите переопределенияtop и left, чтобы обеспечить свои собственные ценности, вы можете сделать это, давая свои стили, как !important.

#element_to_pop_up { 
    left: 10px !important; 
    top:10px !important; 
} 

Обновлено JSFiddle: https://jsfiddle.net/24A9b/13946/

Answer 2

Вы можете использовать

left: 10px !important; 

Поскольку позиция модальной является уже вычислили и назначен рядный скриптом библиотеки вы используете.

!important придаст целевому элементу приоритет слева/сверху над любым стилем css, который нацелен на один и тот же элемент.

Answer 3

Вы можете добавить position свойство к bPopup метода, который будет занимать позицию x и y как массив, как это.

$('#element_to_pop_up').bPopup({ 
    position: [10,100] 
}); 

Чтобы передать x и y мыши координаты для всплывающего окна, это будет вариант.

$('#my-button').bind('click', function(e) { 

    var offset = $(this).offset(); 
    var x = (e.pageX - offset.left); 
    var y = (e.pageY - offset.top); 

    // Prevents the default action to be triggered. 
    e.preventDefault(); 

    // Triggering bPopup when click event is fired 
    $('#element_to_pop_up').bPopup({ 
     position: [x,y] 
    }); 

}); 

Вот рабочая Fiddle