Hiển thị nút Đóng ở bên phải của Hộp thoại jQuery

Tôi đã tạo một jQuery Dialog như trong số Demo này. Nó hoạt động bình thường. nút đóng được hiển thị ở bên phải trong đó. nhưng trên trang web của tôi, chạy trên localhost, nút đóng được hiển thị ở phía bên trái như trong hình dưới đây.Hiển thị nút Đóng ở bên phải của Hộp thoại jQuery

jQuery Dialog

Làm cách nào tôi có thể giải quyết vấn đề này?

Đóng Kiểu Nút

<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>

Nguồn

2013-07-17 Bishan

Trong máy tính của bạn? Hoặc trên trang web của bạn? –

trên trang web của tôi, chạy trên máy chủ cục bộ :) – Bishan

@bishan, khi thay đổi .ui-dialog này .ui-dialog-titlebar-close từ phải: 0; để lại: 0 ;, giải quyết vấn đề trong fiddle, vì vậy nó có thể rằng, một số css/phong cách khác là ghi đè phong cách này, –

Sự khác biệt giữa example files của bạn và jsFiddle demo là các jsFiddle bao gồm một chủ đề jQueryUI mà đang thêm một số quy tắc CSS vào <button>.

Bằng cách thêm bất kỳ chủ đề jQueryUI nào vào bản trình diễn của bạn, nó sẽ khắc phục sự cố. Ví dụ, bao gồm:

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

thêm phong cách:

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

trong đó bao gồm position: absolute. Nếu không có position, số right: 0 mà tôi đã thêm vào câu hỏi khác Hide Title bar and Show Close Button in jQuery Dialog không có hiệu lực, điều này giải thích tại sao nút xuất hiện ở bên trái, vì đó là nơi xuất hiện tự nhiên trong luồng thông thường.

Vì vậy, nếu bạn không sử dụng một jQueryUI theme, sau đó bạn cần phải thêm position: absolute đến gần nút của quy tắc, như thế này:

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

Nguồn

2013-07-18 20:41:11 andyb

Cảm ơn andyb :) – Bishan

Bạn có thể kiểm tra câu hỏi mới của tôi về [lấy giá trị từ GridView trong Hộp thoại jQuery trong C#] (http://stackoverflow.com/questions/17803400/how-to-get-values-from-gridview-in -jquery-dialog-in-c-sharp). bây giờ tôi đang gặp rắc rối vì câu hỏi này. – Bishan

Tôi đã không được mã hóa trong 'C#' trong một thời gian dài nhưng tôi sẽ xem xét câu hỏi của bạn và trợ giúp nếu có thể. – andyb

Một khả năng - Các phong cách được mâu thuẫn. Kiểm tra các thuộc tính CSS left: (hoặc right:) trong tệp html và CSS của bạn. Tôi nghĩ rằng phong cách cho các lớp -

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

là mâu thuẫn.

Edit:

<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>

Nguồn

2013-07-17 04:34:05 GLES

'.ui-dialog .ui-dialog-titlebar-close { left: 0; } 'không hoạt động. – Bishan

'result-light.css' là gì? – Bishan

Tôi đã sao chép mã của bạn vào một trang 'html' và dòng chú thích cho tờ kiểu' result-light.css' và chạy. nhưng nút đóng vẫn ở bên trái. – Bishan

đây là css mà u cần thay đổi :)

http://prntscr.com/1fwgfz

Nguồn

2013-07-17 08:35:19

Hiển thị nút Đóng ở bên phải của Hộp thoại jQuery

Trả lời

Các vấn đề liên quan