JQuery मॉडल बॉक्स और इफ्रेम

Question

मैं सरल मॉडल का उपयोग कर रहा हूं और मुझे लगता है कि इस समय मुझे जो चाहिए वह उस पर निर्भर नहीं है।

क्या कोई मॉडल बॉक्स है जो बाहरी फ़ाइलों को लोड करने का समर्थन करता है और उन बाहरी फ़ाइलों को मोडल बॉक्स को बंद करने और पैरेंट पेज को कुछ यूआरएल पर रीडायरेक्ट करने की अनुमति देता है।

मैं जो करना चाहता हूं उसका एक उदाहरण। आपके पास उपयोगकर्ताओं की एक सूची है, आप "उपयोगकर्ता जोड़ें" पर क्लिक कर सकते हैं और फ़ॉर्म के साथ एक मॉडल बॉक्स पॉप अप कर सकते हैं, आप इसे भरकर सबमिट कर सकते हैं। वह बॉक्स को बंद कर देगा और उपयोगकर्ता सूची पृष्ठ को फिर से लोड करेगा ताकि आप सूची में उपयोगकर्ता को देख सकें।

फिर आप "उपयोगकर्ता संपादित करें" पर क्लिक कर सकते हैं और फॉर्म फ़ील्ड में भरे उपयोगकर्ता जानकारी के साथ एक मॉडल बॉक्स पॉप अप हो जाएगा और आप संपादित कर सकते हैं, सबमिट कर सकते हैं और यह बंद और रीफ्रेश कर सकते हैं।

मुझे पता है कि यह किया जा सकता है यदि मेरे पास प्रत्येक उपयोगकर्ता के लिए छिपी हुई div के रूप में उपयोगकर्ता जानकारी फॉर्म है लेकिन यह अच्छी तरह से स्केल नहीं करेगा और यह बहुत अधिक ओवरहेड डेटा है।

मैं कुछ code about this on Google Code पाया लेकिन सिर्फ यह काम करने के लिए नहीं मिल सकता है (संभवतः अलग सरल मोडल संस्करण

मैं भी एक और मोडल बॉक्स उपकरण को बदलने के लिए तैयार हूँ

अद्यतन:।

Do या तो Thickbox या Fancybox समर्थन एक बच्चे iframe तत्व से बंद किया जा रहा?

Answer 1

Fancybox भी एक और विकल्प है। इसी तरह काम करता है thickbox को

संपादित करें:

यह कुछ खेल के आसपास है कि प्लगइन देशी रूप एक बच्चे iframe तत्व के माध्यम से Fancybox बंद करने का समर्थन नहीं करता के बाद दिखाई देता है। मुझे लगता है कि यह निश्चित रूप से थोड़ा प्रयास के साथ प्राप्त किया जा सकता है (मैंने हैकिंग कुछ here मिला, हालांकि मुझे लगता है कि यह केवल एक पीओसी था और आईफ्रेम के भीतर बटन के रूप में काम नहीं करता है, जो डोम से फैंक्सबॉक्स डिव रैपर को हटा देता है और इसलिए जब आप फिर से Google छवि पर क्लिक करते हैं तो प्रदर्शित नहीं होता है)। हालांकि, मैं सोच रहा हूं कि अगर आईफ्रेम नीचे जाने के लिए सही रेखाएं हैं।

उपयोगकर्ता जोड़ने के लिए, मेरा विचार यह होगा कि आप उपयोगकर्ता को एक मॉडल प्रारूप के साथ Monster site you get when you click 'Sign In.' पर प्रस्तुत कर सकते हैं, एक बार जब आप उपयोगकर्ता जोड़ते हैं, तो एक नया उपयोगकर्ता डालने के लिए अपने डेटा स्रोत पर AJAX कॉल करें और फिर चालू करें सफलता की वापसी, आप या तो पृष्ठ को रीफ्रेश कर सकते हैं या सूची अपडेट करने के लिए AJAX का उपयोग कर सकते हैं।

किसी उपयोगकर्ता को संपादित करने के बाद, उपयोगकर्ता को संपादित करने के लिए, आप एक उपयोगकर्ता आईडी के साथ एक AJAX कॉल कर सकते हैं, जो आपके डेटा स्रोत से पुनर्प्राप्त उपयोगकर्ता विवरण के साथ एक मोडल फॉर्म को पॉप्युलेट कर सकता है जब AJAX कॉल सफलता देता है। एक बार जब आप उपयोगकर्ता को संपादित करना समाप्त कर लेंगे, तो अपने डेटासोर्स को अपडेट करने के लिए एक AJAX कॉल करें और फिर, पृष्ठ को रीफ्रेश करें या सूची अपडेट करने के लिए AJAX का उपयोग करें।

प्रत्येक परिदृश्य में पेज रीफ्रेश या अंतिम AJAX कॉल के बजाय, आप सूची/सूची विवरण अपडेट करने के लिए क्रमशः जावास्क्रिप्ट/jQuery का उपयोग कर सकते हैं, इस पर निर्भर करता है कि कोई उपयोगकर्ता क्रमशः जोड़ा या संपादित किया गया है या नहीं।

Answer 2

आप ThickBox की कोशिश की है?

Answer 3

मुझे मेरे लिए समाधान मिला है, यह nyroModal का उपयोग कर रहा है।यह iframes का समर्थन करता है और इस कोड के साथ अपने आईफ्रेम बच्चे के माध्यम से मोडल को बंद करता है।

parent.$.nyroModalRemove(); 

मैं रस कैम के जवाब स्वीकार करने के लिए उसे और अधिक प्रतिनिधि देने के लिए के बाद से अपने जवाब नहीं दिया मुझे यह कैसे काम करने के लिए जा रहा है के बारे में बहुत लगता है और अंत में मुझे जवाब खोजने बनाया जा रहा हूँ।

Answer 4

ऐसा लगता है कि आप पहले से ही इस सवाल का जवाब मिल गया, लेकिन दूसरों के लाभ के लिए आप iFrame में निम्न JavaScript का उपयोग करके FancyBox के iFrame कार्यान्वयन बंद कर सकते हैं:

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

Answer 5

parent.$.modal.close(); सरल मोडल प्लगइन के लिए काम करता है।

Answer 6

नीचे एक आईफ्रेम में एक मूल संवाद इंटरैक्शन लोडिंग सामग्री है और फिर iFrame से संवाद बंद कर रहा है।

ध्यान दें कि इसे स्पष्ट करने के लिए मेरे पास दो कोड स्निपेट हैं। पहले file1.html लेबल किया गया है। दूसरा, आपको "myPage.html" नाम देना चाहिए यदि आप इसे काम करना चाहते हैं और इसे पहली फ़ाइल के समान निर्देशिका में रखें।

ध्यान दें कि संवाद को बंद करने के लिए कॉल को वांछित कार्यक्षमता के आधार पर अन्य तरीकों से उपयोग किया जा सकता है। उदाहरण के लिए एक और उदाहरण सफल फॉर्म सबमिशन पर हो सकता है।

अपने सिस्टम पर स्थानीय रूप से फ़ाइलें बनाएं और फ़ाइल 1.html खोलें और इसे आज़माएं।

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> 

Answer 7

मेरे FrameDialog इस के लिए अनुमति देगा, यह मूल रूप से संवाद पर फैली हुई है ... यदि आप उपयोग कर रहे हैं एक ही डोमेन, आप $FrameDialog.close() को कॉल करने में सक्षम होना चाहिए, हालांकि, अगर आप रीडायरेक्ट कर रहे हैं, तो आप बस माता-पिता को रीडायरेक्ट कर सकते हैं। window.parent.location करेंगे। अपने iframe में इस लिंक

उपयोग::

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

Answer 8

हाय, किसी को भी जो एक मैनुअल का उपयोग कर एक फैंसी बॉक्स iFrame बंद करने में परेशानी हो रही है Wordpress 3.0 में फैंसी बॉक्स के स्थापित

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

यह काम करता है :)

Answer 9

जब मैं फ़ायरबग

के साथ पता लगाता हूं तो यह संवाद की स्क्रिप्ट है

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

मैं, 95% करने के लिए ऊंचाई को बदलने की जरूरत है, क्योंकि संवाद स्क्रॉल हमेशा स्क्रीन टीटी

Answer 10

यह मेरे लिए काम करता में दिखाई दे ...

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

Answer 11

colorbox प्रयास करें यह भी एक अच्छा एक है ।