Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Вопросы по верстке

Вопросы по верстке

     18.05.2014    Общие вопросы по вёрстке, jQuery    2512

вопрос
В чем проблема?
1. При клике и увеличении картинки она вылезает откудато с боку, возможно ли сделать более плавное появление или хотя бы с места ее расположения? Кликать по картинкам тут

2. При просмотре попап профиля человека, нет значка закрытия его, но сама область активна, если туда навести курсор. Каким образом и где это редактируется?
Вопросы по верстке

Ответа пока нет

 

2 комментария

Cartmont
Юзер

Cartmont - 18 мая 2014 22:04 -

Тут все очень просто

1. Для правильной работы всплывающих окон скопируйте следующий код в подключенный файл css и не забудьте залить две картинки с дефолтного шаблона images/ui-icons.png и images/ui-icons_р.png

/*---Диалоговые и всплывающие окна jQuery UI---*/

.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }

.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.ui-helper-clearfix {
    display: inline-block;
}

* html .ui-helper-clearfix {
    height: 1%;
}

.ui-helper-clearfix {
    display: block;
}

.ui-icon {
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
    text-indent: -99999px;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-widget {
    font-size: 11px;
    font-family: Verdana;
}


.ui-widget-content {
    background: #fff 50% bottom repeat-x;
    border: 1px solid #dedede;
    color: #222;
}

.ui-widget-header {
    background: #cccccc url(../images/ui-bg_gloss-wave.png) 50% 50% repeat-x;
    color: #000;
    font-weight: bold;
}

.ui-widget-header a {
    color: #fff;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    background: #eaeaea url(../images/ui-bg_glass_85.png) 50% 50% repeat-x;
    border: 1px solid #cfcfcf;
    color: #868686;
    font-weight: bold;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #2e6e9e;
    text-decoration: none;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
    background: #eaeaea url(../images/ui-bg_glass_75.png) 50% 50% repeat-x;
    border: 1px solid #a7a7a7;
    color: #4e4e4e;
    font-weight: bold;
}

.ui-state-hover a, .ui-state-hover a:hover {
    color: #1d5987;
    text-decoration: none;
}

.ui-state-active, .ui-widget-content .ui-state-active {
    background: #d0e5f5 50% 50% repeat-x;
    border: 1px solid #a7a7a7;
    color: #e17009;
    font-weight: bold;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #e17009;
    text-decoration: none;
}

.ui-state-error {
    background: #fef1ec 50% 50% repeat-x;
    border: 1px solid #dedede;
    color: #cd0a0a;
}

.ui-widget-header .ui-icon {
    background-image: url(../images/ui-icons.png);
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url(../images/ui-icons_h.png);
}

.ui-icon-close {
    background-position: -80px -128px;
}

.ui-icon-closethick {
    background-position: -96px -128px;
}

.ui-button .ui-button-text {
    display: block;
    line-height: 1.4em;
}

.ui-button-text-only .ui-button-text {
    padding: .4em .8em;
}

input.ui-button {
    padding: .4em 1em;
}

.ui-button-set {
    margin-right: 7px;
}

.ui-button-set .ui-button {
    margin-left: 0;
    margin-right: -.3em;
}

button.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.ui-dialog {
    overflow: hidden;
    padding: .2em;
    position: absolute;
    width: 300px;
    -moz-box-shadow: 0px 12px 25px rgba(0,0,0,0.7);
    -webkit-box-shadow: 0px 12px 25px rgba(0,0,0,0.7);
    box-shadow: 0px 12px 25px rgba(0,0,0,0.7);
}

.ui-dialog .ui-dialog-titlebar {
    padding: .5em 1em .3em;
    position: relative;
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 16px .2em 0;
}

.ui-dialog .ui-dialog-titlebar-close {
    height: 18px;
    margin: -10px 0 0 0;
    padding: 1px;
    position: absolute;
    right: .3em;
    top: 50%;
    width: 19px;
}

.ui-dialog .ui-dialog-titlebar-close span {
    display: block;
    margin: 1px;
}

.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
    padding: 0;
}

.ui-dialog .ui-dialog-content {
    background: none;
    border: 0;
    overflow: hidden;
    padding: .5em 1em;
    position: relative;
    zoom: 1;
}

.ui-dialog .ui-dialog-buttonpane {
    background-image: none;
    border-width: 1px 0 0 0;
    margin: .5em 0 0 0;
    padding: .3em 1em .5em .4em;
    text-align: left;
}

.ui-dialog .ui-dialog-buttonpane button {
    cursor: pointer;
    float: right;
    line-height: 1.4em;
    margin: .5em .4em .5em 0;
    overflow: visible;
    padding: .2em .6em .3em .6em;
    width: auto;
}

.ui-dialog .ui-resizable-se {
    bottom: 3px;
    height: 14px;
    right: 3px;
    width: 14px;
}

.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}
Cartmont
Юзер

Cartmont - 18 мая 2014 22:07 -

2. Для правильной работы увеличения картинок скопируйте следующий код в подключенный файл css

/*---показ оригинальной картинки загруженной на сайт из уменьшенной копии---*/
.highslide-wrapper, .highslide-outline {
    background: #FFFFFF;
}

.highslide-image {
    border: 2px solid #FFFFFF;
}

.highslide-active-anchor {
    visibility: hidden;
}

 .highslide-active-anchor img {
    visibility: hidden;
}

.highslide-dimming {
    background-color: black;
}

.highslide-html {
    background-color: white;
}

.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-decoration: none;
    padding: 3px;
    border: 1px solid white;
    background-color: black;
}

a.highslide-full-expand {
    background: url("../dleimages/fullexpand.gif") no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}

.highslide-display-block {
    display: block;
}

.highslide-display-none {
    display: none;
}

.highslide-caption {
    display: none;
    padding: 5px;
    background: white;
}

.highslide-controls {
    width: 195px;
    height: 40px;
    background: url("../../../engine/classes/highslide/graphics/controlbar-black-border.gif") no-repeat 0 -90px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.highslide-controls ul {
    position: relative;
    left: 15px;
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: url("../../../engine/classes/highslide/graphics/controlbar-black-border.gif") no-repeat 100% -90px;
}

.highslide-controls li {
    float: left;
    padding: 5px 0;
}

.highslide-controls a {
    background: url("../../../engine/classes/highslide/graphics/controlbar-black-border.gif");
    display: block;
    float: left;
    height: 30px;
    width: 30px;
    outline: none;
}

.highslide-controls a.disabled {
    cursor: default;
}

.highslide-controls a span {
    display: none;
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 26.06.2011 Mufasa  Общие вопросы по вёрстке
 10.07.2011 bot  Общие вопросы по вёрстке
 10.03.2012 pleak  Общие вопросы по вёрстке
 11.08.2012 twip  Общие вопросы по вёрстке
 14.12.2012 Ayk  Общие вопросы по вёрстке, Стили (CSS)
 14.08.2013 tashkevski  Общие вопросы по вёрстке, Стили (CSS)
 01.01.2014 KAPTMEH  Общие вопросы по вёрстке, Шаблоны (TPL)
 04.03.2014 thirus  Общие вопросы, Общие вопросы по вёрстке, Стили (CSS), jQuery, Общие вопросы по PHP
 18.05.2014 tullius  Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
 22.09.2014 PyccKuu  Общие вопросы по вёрстке
наверх