1. Trang chủ
  2. Câu hỏi và trả lời
  3. Hộp phương thức JQuery và khung nội tuyến

Hộp phương thức JQuery và khung nội tuyến

2009-02-04 13 views
17

Tôi đã sử dụng chế độ đơn giản và tôi cảm thấy nó không sống theo những gì tôi cần vào lúc này.Hộp phương thức JQuery và khung nội tuyến

Có một Hộp phương thức hỗ trợ tải các tệp bên ngoài và cho phép các tệp bên ngoài đó đóng hộp phương thức và chuyển hướng trang mẹ đến một số url.

Ví dụ về những gì tôi muốn làm. Bạn có một danh sách người dùng, bạn có thể nhấp vào "Thêm người dùng" và Hộp mô hình với biểu mẫu bật lên, bạn điền vào và gửi nó. Điều đó sẽ đóng hộp và tải lại trang danh sách người dùng để bạn có thể thấy người dùng trong danh sách.

Sau đó, bạn có thể nhấp vào "Chỉnh sửa người dùng" và Hộp mô hình với thông tin người dùng được điền vào các trường biểu mẫu sẽ bật lên và bạn có thể chỉnh sửa, gửi và đóng.

Tôi biết điều này có thể được thực hiện nếu tôi có biểu mẫu thông tin người dùng dưới dạng div ẩn cho mỗi người dùng nhưng điều này sẽ không mở rộng tốt và rất nhiều dữ liệu trên cao.

Tôi tìm thấy một số code about this on Google Code nhưng chỉ là không thể lấy nó để làm việc (có thể khác nhau phiên bản phương thức đơn giản

Tôi sẵn sàng để thay đổi một công cụ hộp modal cũng

UPDATE:.

Đỗ hỗ trợ Thickbox hoặc Fancybox bị đóng từ phần tử IFrame con?

Nguồn

2009-02-04 Ólafur Waage

+1

Thickbox đã chết, hãy sử dụng cái gì đó khác. (xem trang của họ để được gợi ý) – dland

Trả lời

8

Fancybox cũng là một tùy chọn khác. Hoạt động tương tự để thickbox

EDIT:

Nó xuất hiện sau khi một số chơi xung quanh rằng các plugin không natively hỗ trợ đóng Fancybox qua một yếu tố iframe đứa trẻ. Tôi nghĩ rằng điều này chắc chắn có thể đạt được với một chút nỗ lực (tôi bắt đầu hack cùng nhau một cái gì đó here, mặc dù tôi nhấn mạnh rằng đây chỉ đơn giản là POC và không hoạt động khi nút trong khung nội tuyến xóa trình bao bọc fancybox div khỏi DOM và do đó không hiển thị khi bạn nhấp vào hình ảnh google một lần nữa) .Tôi đang tự hỏi, nếu iframe là dòng đúng để đi xuống.

Để thêm người dùng, suy nghĩ của tôi là bạn có thể hiển thị cho người dùng bằng biểu mẫu giống như trên Monster site you get when you click 'Sign In.' Khi bạn nhấp vào thêm người dùng, thực hiện cuộc gọi AJAX tới nguồn dữ liệu của bạn để chèn người dùng mới và sau đó bật trở về thành công, bạn có thể bắt đầu làm mới trang hoặc sử dụng AJAX để cập nhật danh sách. Để chỉnh sửa người dùng, khi người dùng được chọn, bạn có thể thực hiện cuộc gọi AJAX với id người dùng để điền một biểu mẫu với chi tiết người dùng được truy xuất từ ​​nguồn dữ liệu của bạn khi cuộc gọi AJAX trả về thành công. Khi bạn đã hoàn tất việc chỉnh sửa người dùng, thực hiện cuộc gọi AJAX để cập nhật nguồn dữ liệu của bạn và sau đó một lần nữa, bắt đầu làm mới trang hoặc sử dụng AJAX để cập nhật danh sách.

Thay vì làm mới trang hoặc gọi AJAX cuối cùng trong mỗi trường hợp, bạn có thể chỉ cần sử dụng JavaScript/jQuery để cập nhật chi tiết danh sách/danh sách, tùy thuộc vào việc người dùng đã được thêm hoặc chỉnh sửa tương ứng.

Nguồn

2009-02-04 17:17:48

+0

Tôi thực sự đánh giá cao nỗ lực của bạn về điều này và ý tưởng của bạn để sử dụng AJAX có lẽ sẽ khiến tôi khá xa vào những gì tôi muốn. Tôi sẽ kiểm tra nó ra tại nơi làm việc vào ngày mai và bệnh cập nhật câu hỏi của tôi khi tôi tìm thấy một cái gì đó. Cảm ơn một lần nữa. –

1

Tôi đã tìm thấy giải pháp cho tôi, nó sử dụng nyroModal.Nó hỗ trợ iframe và đóng của phương thức thông qua con iframe của nó với mã này.

parent.$.nyroModalRemove();

Tôi sẽ chấp nhận câu trả lời Russ Cam để cho anh ta đại diện hơn vì trả lời của ông khiến tôi suy nghĩ rất nhiều về cách thức này là đi làm việc và cuối cùng khiến tôi tìm ra câu trả lời.

Nguồn

2009-02-05 09:42:36

+0

Cảm ơn bạn :) Funnily đủ, tôi bắt đầu chơi với đóng Fancybox thông qua một phần tử iframe con bằng cách gọi hàm fancybox gần và nhận được rằng làm việc. Tôi rất vui vì bạn đã tìm được giải pháp. Bạn có một liên kết cho nyroModal? –

+0

Tôi chắc chắn sẽ làm. http://nyromodal.nyrodev.com/ –

16

Âm thanh như bạn đã tìm thấy câu trả lời nhưng vì lợi ích của người khác bạn có thể đóng một thực hiện iFrame của Fancybox bằng JavaScript sau trong iFrame:

parent.$.fn.fancybox.close();

Nguồn

2009-04-24 21:03:23 Blegger

+0

Không hoạt động khi khung nội tuyến tải một trang web khác, do tập lệnh trang web chéo ... – seldary

3

parent.$.modal.close(); công trình cho plugin phương thức đơn giản.

Nguồn

2009-08-18 23:50:44

13

Dưới đây là nội dung tải tương tác thoại cơ bản vào iFrame và sau đó đóng hộp thoại từ iFrame.

Lưu ý rằng để minh họa điều này, tôi có hai đoạn mã. Đầu tiên được dán nhãn file1.html. Cái thứ hai bạn nên đặt tên là "myPage.html" nếu bạn muốn nó hoạt động và đặt nó vào cùng thư mục với tập tin đầu tiên.

Lưu ý rằng cuộc gọi để đóng hộp thoại có thể được sử dụng theo các cách khác tùy thuộc vào chức năng mong muốn của bạn. Ví dụ: một ví dụ khác có thể là gửi biểu mẫu thành công.

Tạo tệp cục bộ trên hệ thống của bạn và mở tệp1.html và dùng thử.

file1.html

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#modalDiv").dialog({ 
       modal: true, 
       autoOpen: false, 
       height: '180', 
       width: '320', 
       draggable: true, 
       resizeable: true, 
       title: 'IFrame Modal Dialog' 
      }); 
      $('#goToMyPage').click(
       function() { 
        url = 'myPage.html'; 
        $("#modalDiv").dialog("open"); 
        $("#modalIFrame").attr('src',url); 
        return false; 
      });     
     }); 
    </script> 
    </head> 
    <body> 
     <a id="goToMyPage" href="#">Go to My Page</a> 
     <div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div> 
    </body> 
</html>

mypage.html

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#clickToClose').click(
       function() { 
        window.parent.$("#modalDiv").dialog('close'); 
        return false; 
      }); 
      // uncomment and use the below line close when document is ready (no click action by user needed) 
      // the same call could be put elsewhere depending on desired functionality (after successful form submit, etc.) 
      // window.parent.$("#modalDiv").dialog('close');      
     }); 
    </script> 
    </head> 
    <body> 
     <a id="clickToClose" href="#">Click to close.</a> 
    </body> 
</html>

Nguồn

2010-05-08 21:01:03

0

My FrameDialog sẽ cho phép cho điều này, nó về cơ bản kéo dài trên Dialog ... nếu bạn đang sử dụng cùng một tên miền, bạn sẽ có thể gọi $ .FrameDialog.close(), nếu bạn đang chuyển hướng, bạn chỉ có thể chuyển hướng cha mẹ. window.parent.location sẽ làm.

http://plugins.jquery.com/project/jquery-framedialog

Nguồn

2010-06-16 20:39:33 Tracker1

0

HI, Bất cứ ai đang gặp khó khăn bế một Fancy Box iFrame sử dụng một hướng dẫn cài đặt của Fancy Box trong Wordpress 3.0:

Sử dụng liên kết này trong iframe của bạn:

<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>

Nó hoạt động :)

Nguồn

2010-07-16 11:38:29 dave

1

đây là tập lệnh của hộp thoại khi tôi truy tìm bằng firebug

<iframe> 
     scrolling="auto" 
     height="100%" 
     frameborder="0" 
     width="100%" 
     title="Dialog Title" 
     marginheight="0" 
     marginwidth="0" 
     id="modalIFrame" 
     src="test.php" 
</iframe>

tôi cần phải thay đổi chiều cao đến 95%, vì cuộn thoại luôn có thể nhìn thấy trong màn hình TT

Nguồn

2011-02-28 10:51:33 sting

0

này làm việc cho tôi ...

<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />

Nguồn

2011-06-01 13:54:23 Matthieu

0

Hãy thử colorbox nó cũng là một trong những tốt .

Nguồn

2013-02-21 07:25:05 235

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

  • Không có vấn đề liên quan^_^