jquery对话框高度如何降低顶部高度?

时间:2017-06-21 14:28:14

标签: javascript jquery html css

我是jquery的新手。 我有一个对话框,我想减少此图像上的红色高度:

enter image description here

有可能吗?

我必须说我已经更改了for count, (key, value) in enumerate(my_dict.iteritems(), 1): print key, value, count 代码,如下所示:

jquery-ui.css

我的html文件中的代码:

.ui-dialog {
    position: fixed;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
}

/*.fixed-dialog{
  position: fixed;
  top: 50px;
  left: 50px;
}*/

/* Barre titre popup */
.ui-dialog .ui-dialog-titlebar {
        padding: .1em 1em;
        border: 0;
    position: relative;
        top: -80px;
        height: 45px;
        /*width: 310px; */
        margin: 1em 0;
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        border-radius: 5px 5px 5px 5px;
}
/* Titre popup */
.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
        /* ajouté */
        text-align: center;
        color: #ffffff;
}
/* Bouton fermer en haut */
.ui-dialog .ui-dialog-titlebar-close {
    display: none;
        position: absolute;
    right: .3em;
    top: 170%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
        outline: none;
}
/* Texte popup */
.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: 0em 1em;
    background: none;
    overflow: auto;
}
/* Barre boutons */
.ui-dialog .ui-dialog-buttonpane {
        position: relative;
        text-align: left;
    border-width: 1px 0 0 0;
    margin-top: .5em;
    padding: .3em .6em .6em 1em; /* H D B G */
        outline: none;
        background: #a3cb38;
        border-radius: 5px 5px 5px 5px;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    /* float: right; */
        float: none !important;
        text-align:right;
}
.ui-dialog .ui-dialog-buttonpane button {
    /*margin: .5em .4em .5em 0;*/
    position: relative;
        border: 0;
        top: 3px;
        left: 15px;
        width: 100px;
        height: 45px;
        cursor: pointer;
        color: #ffffff;   /* couleur police bouton */
        outline: none;
        font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        background: #fed136;   /* couleur fond bouton */
        border-radius: 12px 5px 12px 5px; 
}

.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;

减少红色高度的想法?

html行:

$("#dialog").dialog({
                autoOpen: true,
                modal: false,
                bgiframe: true,
                draggable: true,
                height: 300,
                width: 350,
                position: 'center',
                show: {
                 effect: "fade",
                 duration: 1000
                },
                hide: {
                 effect: "fade",
                 duration: 400
                }, 
                resizable: false,
                buttons: [
                      {text: "OK", click: function () {
                      [...]
                      }

我的css文件:

<header>
    <!-- popup -->
    <div id="dialog" class="pop" title="Info">
        <h3><center ">A long text here, like this one. And more.</center></h3>
        <h3><center ">Second line !</center></h3>
    </div>
</header>

1 个答案:

答案 0 :(得分:0)

top: -80px

中删除margin: 1em 0;.ui-dialog .ui-dialog-titlebar

check this fiddle