Hộp thoại giao diện người dùng jQuery không mở lần thứ hai

Question

Tôi đang sử dụng jqueryui cho hộp thoại. Nhấp vào liên kết 'Nhấp cho một phương thức' lần đầu tiên hoạt động. Khi nhấn phím ESC, hộp thoại sẽ biến mất. Nhưng các nhấp chuột sau đó không hoạt động. Tôi cũng muốn những người đó làm việc. Làm mới trang làm mọi thứ OK.

HTML:

<a href="" class="click_me" style="font-size:15px;"> Click for a modal</a><br /> 

<div class="demo" "> 

<div id="dialog" title="&nbsp;&nbsp;&nbsp;Upload Your Profile Picture" style="border1111:1px solid red; width:640px;"> 

     this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is 


</div><!-- end of id dialog --> 
</div><!-- End demo --> 

đoạn jQuery:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $(".click_me").bind('click', function (e) { 
     e.preventDefault(); 
     $("#dialog").css('border', '5px solid #848484'); 
     $("#dialog").dialog({ 
      width: 460 
     }); 
     //$("#dialog").dialog("option", "height", 180); 
    }); 

    $("body").bind("keyup#dialog", function (event) { 
     // 27 == "esc" 
     if (event.which == 27) { 
      // TODO: close the dialog 
      // unbind the event 
      $("body").unbind("keyup.myDialog"); 
     } 
    }); 

}); 
</script> 

Làm thế nào tôi có thể làm nhiều lần nhấp chuột hoạt động?

Answer 1

Bốn điều.

Thứ nhất, nếu các hộp thoại nên được tái sử dụng, bạn sẽ muốn tạo ra nó trước nhấp đầu tiên và thiết lập các tùy chọn autoOpen-false. Để mở hộp thoại, bạn nên sử dụng dialog('open').

Ví dụ:

$(document).ready(function() { 

    var dialog = $('#dialog'); 

    dialog.dialog({    // <-- create the dialog 
     width: 460, 
     autoOpen: false 
    }); 

    $(".click_me").bind('click', function (e) { 
     e.preventDefault(); 
     dialog.dialog('open'); // <-- open the dialog 
    }); 
}); 

Lưu ý rằng tôi có thể tạo một var dialog để lưu $('#dialog'). Điều này hiệu quả hơn, bởi vì nếu không, jQuery sẽ phải tìm kiếm #dialog nhiều lần trong một đoạn mã.

Thứ hai, bạn có một lỗi trong HTML của bạn: có một trích dẫn quá nhiều ở đây:

<div class="demo" "> 

này có thể gây ra hành vi bất ngờ trong một số trình duyệt (nhưng không phải tất cả), mà làm cho nó khó khăn để gỡ lỗi. Xóa báo giá bổ sung.

Thứ ba, nếu tôi nhớ chính xác, Hộp thoại giao diện người dùng jQuery đã xử lý khóa ESC, vì vậy bạn không phải tự mình làm điều đó. Nếu bạn muốn làm điều gì khác hơn là đóng hộp thoại khi nhấn exscape, bạn thực sự nên sử dụng sự kiện beforeClose của hộp thoại. Nếu tất cả những gì bạn muốn làm là đóng hộp thoại; bạn đã sẵn sàng. :-)

Và cuối cùng, thực tiễn tốt là không sử dụng kiểu nội tuyến. Vì vậy, thay vì điều này:

<a href="" class="click_me" style="font-size:15px;">Click for a modal</a> 

Tạo một file CSS như sau:

.click_me { 
    font-size:15px; 
} 

Bạn có thể làm tương tự cho #dialog, bao gồm biên giới bây giờ bạn đang áp dụng với JavaScript:

#dialog { 
    border: 5px solid #848484; 
    width:640px; 
} 

Hy vọng điều này sẽ hữu ích.

---

Dưới đây là một ví dụ làm việc áp dụng bốn điểm tôi đã đề cập: http://jsfiddle.net/PPvG/yHTJw/

Lưu ý rằng phong cách jQuery UI đang thiếu, vì vậy hộp thoại là một chút xấu xí.:-)

---

Để đảm bảo Dialog công trình như mong đợi, hãy chắc chắn rằng bạn đang sử dụng phiên bản mới nhất của jQuery và jQuery UI và rằng bạn bao gồm một Chủ đề jQuery UI.

Dưới đây là một ví dụ trong đó tất cả mọi thứ được nạp qua Google CDN:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" /> 

Bao gồm những trong <head> HTML của bạn. Kết quả sẽ xem xét like this. Nếu không, bạn có thể thử một vài điều sau:

• Hãy xem bảng điều khiển JavaScript của trình duyệt (mọi trình duyệt hiện đại có một; Google nó).
• Thử một trình duyệt khác.
• Thử cách tải trang khác (ví dụ: qua file:// so với qua localhost).
• (trường hợp cực độ :) Thử máy tính khác và kết nối internet khác.

Nếu không có cách nào hiệu quả, tôi rất tiếc phải nói, nhưng ... "bạn đang làm sai". :-P

Lưu ý rằng đoạn mã ở trên sẽ bao gồm chủ đề giao diện người dùng jQuery mặc định được gọi là "cơ sở". Nếu nó không phù hợp với nhu cầu của bạn, bạn có thể sử dụng Google CDN cho một số chủ đề mặc định khác (xem this blog post) hoặc bạn có thể tạo chủ đề của riêng mình bằng cách sử dụng ThemeRoller.

---

Edit:

Để đảm bảo Dialog giữ lại tập trung (và do đó được đóng lại khi người dùng nhấn ESC, ngay cả khi người dùng nhấp một nơi khác trên trang), thử thiết modal true :

$('#dialog').dialog({ 
    autoOpen: false, 
    modal: true 
}); 

jsFiddle: http://jsfiddle.net/PPvG/yHTJw/3/

Bình thường ly, người dùng vẫn có thể tương tác với các mục khác trên trang (và do đó, những mục này có thể lấy tiêu điểm khỏi Hộp thoại). Khi tùy chọn modal được đặt thành true, người dùng không còn có thể lặp lại với phần còn lại của trang và Hộp thoại sẽ tiếp tục tập trung bất kể điều gì.

Hy vọng điều này sẽ hữu ích.

Câu hỏi mới nhất

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.