Mũi tên trong Hộp thoại jQuery

Question

Có cách nào để tôi có thể hiển thị mũi tên ở bên trái của hộp thoại jQuery không? Tôi muốn đạt được chức năng như được đề cập trong hình dưới đây. Làm thế nào để làm điều này với Theme con lăn CSS và các biểu tượng?

jQuery Dialog Customization http://www.freeimagehosting.net/uploads/74b51bb861.jpg

Answer 1

LÊN NGÀY: Tôi đăng câu trả lời đầu tiên của tôi trước khi chỉnh sửa đã được thực hiện, chỉ ra rằng mũi tên đã được đặt trong cơ thể của hộp thoại, vì vậy đây là mã cập nhật của tôi:

var $mydialog = $('<div></div>').html('<div class="myArrow"></div>Your Dialog Content Here').dialog({autoOpen: false,title: 'Retrieving Product Details', modal:true, width:600, height:400, position:'center'}); 

Các div myArrow đã được chuyển đến chính nội dung div của hộp thoại, CSS có thể giống như sau:

.myArrow{ 
    display:block; 
    position:absolute; 
    width:15px; 
    height:15px; 
    left:-15px; /* pushes the arrow OUTSIDE the box */ 
    top:50px; /* or however far from the top you wish */ 
    background: url(path/to/arrow.jpg) center right no-repeat; 
    margin:0 15px 0 0; 
    } 

Answer 2

Một phương pháp đơn giản sẽ là t chỉ cần thêm html và/hoặc css vào thuộc tính tiêu đề của bạn khi xây dựng thoại của bạn như vậy:

var $mydialog = $('<div></div>').html('Your Dialog Content Here').dialog({autoOpen: false,title: '<div class="myArrow"></div>Retrieving Product Details', modal:true, width:600, height:400, position:'center'}); 

$mydialog.dialog('open'); //triggers dialog open event, can close with ('close') 

Và css cho myArrow:

.myArrow{ 
    display:block; 
    float:left; 
    clear:none; 
    width:15px; 
    height:15px; 
    background: url(path/to/arrow.jpg) center center no-repeat; 
    margin:0 15px 0 0; // some maring on the right to push title away from div; 
    } 

Hy vọng rằng sẽ giúp một chút