Göster jQuery İletişim Kutusunun Sağ Tarafındaki Düğmeyi Kapat Düğmesi

jQuery Dialog numaralı telefonu bu Demo içinde oluşturdum. Düzgün çalışıyor. Kapama düğmesi sağ tarafta gösterilmektedir. ama sitemde, localhost üzerinde çalışıyorum, aşağıdaki resimde olduğu gibi sol taraftaki kapatma düğmesi görüntülenir.Göster jQuery İletişim Kutusunun Sağ Tarafındaki Düğmeyi Kapat Düğmesi

jQuery Dialog

Bu nasıl çözebilir?

Kapatma Düğmesi Stil

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"> 
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span> 
<span class="ui-button-text">close</span> 
</button>

kaynak

2013-07-17 Bishan

? Ya da sitende? –

Sitemde, localhost üzerinde çalışıyor :) – Bishan

@bishan, bunu değiştirerek .ui-dialog .ui-dialog-titlebar-close right: 0; sola: 0 ;, kemandaki problemi çözdüm, bu yüzden başka bir css/stil bu stilin üzerine yazıyor olabilir, –

fark senin example files ve jsFiddle demo arasında ihtiyaç css jsFiddle bir jQueryUI tema içerir olan <button>'a bazı CSS kuralları ekliyor.

Demo'unuza herhangi bir jQueryUI teması ekleyerek sorunu düzeltir. Örneğin, dahil:

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel='stylesheet' />

stili ekler:

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

position: absolute içeren. position olmadan, Hide Title bar and Show Close Button in jQuery Dialog numaralı soruya eklediğim right: 0'un hiçbir etkisi yoktur. Bu, düğmenin solda neden görüntülendiğini açıklar, çünkü doğal olarak normal akış'da görünür. Eğer bir jQueryUI theme kullanmıyorsanız

Yani, o zaman bu gibi yakın düğmenin kurallarına position: absolute eklemeniz gerekir: PC'nizde

.ui-dialog .ui-dialog-titlebar-close { 
    position: absolute; 
    right: 0; 
}

kaynak

2013-07-18 20:41:11 andyb

Teşekkürler andyb :) – Bishan

Yeni soruumu kontrol edin [GridView'den jQuery İletişim Kutusu'ndaki değerleri C# olarak edin] (http://stackoverflow.com/questions/17803400/how-to-get-values-from-gridview-in -jquery-iletişim-in-c-keskin). şimdi bu sorudan beri bir sorunum var. – Bishan

Uzun bir süre için C# kodlamadım, ancak soruma bakıp elimden geldiğince yardım edeceğim. Cevabınız için – andyb

Bir olasılık - stilleri çakışıyor. Html ve CSS dosyalarınızdaki left: (veya right:) CSS özniteliklerini kontrol edin. Ders için stilleri düşünüyorum -

.ui-dialog .ui-dialog-titlebar-close

çelişkilidir.

Düzenleme:

<head> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>  
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
<link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
<style type="text/css"> 
.ui-dialog { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: .2em; 
    outline: 0; 
    overflow:visible; 
} 
.ui-dialog .ui-dialog-titlebar { 
    background:transparent; 
    border:none; 
} 
.ui-dialog .ui-dialog-title { 
    display:none; 
} 
.ui-dialog .ui-dialog-titlebar-close { 
    left:0; 
} 
.ui-dialog .ui-dialog-content { 
    position: relative; 
    border: 0; 
    padding: .5em 1em; 
    background: none; 
    overflow: auto; 
} 
.ui-dialog .ui-dialog-buttonpane { border-width: 0 !important; } 
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
    float: right; 
} 
.ui-dialog .ui-dialog-buttonpane button { 
    margin: .5em .4em .5em 0; 
    cursor: pointer; 
} 
.ui-dialog .ui-resizable-se { 
    width: 12px; 
    height: 12px; 
    right: -5px; 
    bottom: -5px; 
    background-position: 16px 16px; 
} 
.ui-draggable .ui-dialog-titlebar { 
    cursor: move; 
} 
.ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after { 
    content: ""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 150px; 
    border-style: solid; 
    border-width: 10px; 
} 
.ui-resizable-handle.ui-resizable-s::before { 
    border-color: #aaa transparent transparent transparent; 
    top: 2px; 
} 
.ui-resizable-handle.ui-resizable-s::after { 
    border-color: #fff transparent transparent transparent; 
    top: 1px; 
} 
</style> 
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){ 
$('#open').click(function() { 
    $('#dialog').dialog('open'); 
}); 
$(document).ready(function() { 
    $('#dialog').dialog({ 
     autoOpen: false, 
     resizable: true, 
     width: 300, 
     height: 'auto', 
     buttons: { 
      "Save": function() { 

      } 
     } 
    }); 
}); 
});//]]> 
</script> 
</head>

kaynak

2013-07-17 04:34:05 GLES

'.ui-dialog .ui-dialog-titlebar-close { left: 0; } 'çalışmıyor. – Bishan

'result-light.css' nedir? – Bishan

Kodunuzu "html" sayfasına kopyalayıp "result-light.css" stil sayfası için yorum satırına kopyaladım. ama yine de kapalı buton sol tarafta. – Bishan

bu u değiştirmek :)

http://prntscr.com/1fwgfz

kaynak

2013-07-17 08:35:19

Göster jQuery İletişim Kutusunun Sağ Tarafındaki Düğmeyi Kapat Düğmesi

cevap

İlgili konular