jQuery संवाद बॉक्स

मैं jquery के साथ एक संवाद बॉक्स करने की कोशिश कर रहा हूँ। इस संवाद बॉक्स में मैं नियम और शर्तें होने जा रहा हूं। समस्या यह है कि संवाद बॉक्स केवल पहली बार प्रदर्शित होता है।jQuery संवाद बॉक्स

यह कोड है।

जावास्क्रिप्ट:

function showTOC() 
{ 
    $("#TOC").dialog({ 
     modal: true, 
     overlay: { 
      opacity: 0.7, 
      background: "black" 
     } 
    }) 
}

एचटीएमएल (एक href):

<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a> 

<div id="example" title="Terms & Conditions">1..2..</div>

समस्या मुझे लगता है कि जब आप संवाद बॉक्स DIV एचटीएमएल कोड से नष्ट हो जाता है बंद therfore यह कभी नहीं कर सकते हैं है स्क्रीन पर फिर से प्रदर्शित किया जाना चाहिए।

क्या आप कृपया मदद कर सकते हैं!

धन्यवाद

स्रोत

2008-12-14 David Bonnici

लग रहा है कोड आप पोस्ट के साथ कोई समस्या मौजूद है। टी & सी प्रदर्शित करने के लिए आपका फ़ंक्शन गलत div आईडी का संदर्भ दे रहा है। आप onclick विशेषता को showTOC समारोह बताए पर विचार करना चाहिए एक बार दस्तावेज़ के रूप में अच्छी तरह से भरी हुई है:

$(document).ready({ 
    $('a.TOClink').click(function(){ 
     showTOC(); 
    }); 
}); 

function showTOC() { 
    $('#example').dialog({modal:true}); 
}

एक अधिक संक्षिप्त उदाहरण जो jQuery यूआई संवाद का उपयोग करके वांछित प्रभाव सिद्ध है:

<div id="terms" style="display:none;"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <a id="showTerms" href="#">Show Terms &amp; Conditions</a>  
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#showTerms').click(function(){ 
       $('#terms').dialog({modal:true}); 
      }); 
     }); 
    </script>

स्रोत

2008-12-14 16:58:30 carlsz

में बदल चाहते हैं मैं तुम्हारे साथ 100% सहमत कर रहा था है। मुझे लगता है कि एक ही पृष्ठ में टीओसी को प्रदर्शित करने का तरीका अलग-अलग तरीका है। समस्या यह है कि सभी टीओसी प्रदर्शित किए जा रहे हैं क्योंकि वे एक डीआईवी स्टेटमेंट में हैं। क्या कोई तरीका है कि जब कोई लिंक बटन पर क्लिक करता है तो केवल डीआईवी को कैसे प्रदर्शित किया जाए? –

दूसरा उदाहरण देखें जो मैंने अभी जोड़ा है। – carlsz

मैंने कोशिश की (आपके कोड को कॉपी और पेस्ट करें लेकिन "लॉरम ..." संवाद बॉक्स में प्रदर्शित नहीं किया जा रहा है और 2. एक बार लिंक क्लिक होने पर संवाद दिखाई देता है, फिर जब मैं बंद बटन पर क्लिक करता हूं और फिर मैं फिर से क्लिक करता हूं टीओसी को फिर से देखने के लिंक पर संवाद प्रकट नहीं होता है ... क्या आप कृपया मेरी मदद कर सकते हैं :(? –

मैं एक ही मुद्दे का सामना करना पड़ा (संवाद केवल एक बार खुल जाएगा, बंद होने के बाद, यह फिर से नहीं खुल जाएगा), और उपरोक्त समाधानों का प्रयास किया जिसने मेरी समस्या को ठीक नहीं किया। मैं दस्तावेज़ों में वापस गया और महसूस किया कि संवाद कैसे काम करता है इस बारे में मुझे एक मूलभूत गलतफहमी थी।

$ ('# myDiv')। संवाद() कमांड संवाद बनाता है/तत्काल करता है, लेकिन यह आवश्यक नहीं है कि खोलें। इसे खोलने का सही तरीका संवाद() के साथ संवाद को तुरंत चालू करना है, फिर इसे प्रदर्शित करने के लिए संवाद ('खुला') का उपयोग करें, और संवाद को बंद/छुपाने के लिए 'बंद करें')। इसका मतलब है कि आप शायद ऑटो ओपेन विकल्प को गलत पर सेट करना चाहते हैं।

तो प्रक्रिया है: दस्तावेज़ तैयार करने के लिए संवाद को तत्काल करें, फिर क्लिक के लिए सुनो या आप जो भी कार्रवाई संवाद करना चाहते हैं उसे सुनें। फिर यह काम करेगा, समय के बाद समय!

<script type="text/javascript"> 
     jQuery(document).ready(function(){  
      jQuery("#myButton").click(showDialog); 

      //variable to reference window 
      $myWindow = jQuery('#myDiv'); 

      //instantiate the dialog 
      $myWindow.dialog({ height: 350, 
       width: 400, 
       modal: true, 
       position: 'center', 
       autoOpen:false, 
       title:'Hello World', 
       overlay: { opacity: 0.5, background: 'black'} 
       }); 
      } 

     ); 
    //function to show dialog 
    var showDialog = function() { 
     //if the contents have been hidden with css, you need this 
     $myWindow.show(); 
     //open the dialog 
     $myWindow.dialog("open"); 
     } 

    //function to close dialog, probably called by a button in the dialog 
    var closeDialog = function() { 
     $myWindow.dialog("close"); 
    } 


</script> 
</head> 

<body> 

<input id="myButton" name="myButton" value="Click Me" type="button" /> 
<div id="myDiv" style="display:none"> 
    <p>I am a modal dialog</p> 
</div>

स्रोत

2009-01-06 15:12:27 RaeLehman

यह मेरे लिए काम करता है, धन्यवाद! –

धन्यवाद - यह मेरी समस्या हल हो गया है! – Matt

+1, अच्छा उदाहरण, मेरी मदद की। – Mark

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

मेरे $ (दस्तावेज़) में .ready ईवेंट मैं ऑटोऑपेन सेट के साथ अपने संवाद को गलत पर प्रारंभ करता हूं। मैंने एक बटन पर एक क्लिक ईवेंट को बाध्य करना भी चुना, जैसे बटन, जो मेरा संवाद खोल देगा।

$(document).ready(function(){ 

    // Initialize my dialog 
    $("#dialog").dialog({ 
     autoOpen: false, 
     modal: true, 
     buttons: { 
     "OK":function() { // do something }, 
     "Cancel": function() { $(this).dialog("close"); } 
    } 
    }); 

    // Bind to the click event for my button and execute my function 
    $("#x-button").click(function(){ 
     Foo.DoSomething(); 
    }); 
});

अगला, मैं सुनिश्चित करता हूं कि फ़ंक्शन परिभाषित किया गया है और यही वह जगह है जहां मैं संवाद खुली विधि लागू करता हूं।

var Foo = { 
    DoSomething: function(){ 
     $("#dialog").dialog("open"); 
    } 
}

वैसे, मैंने आईई 7 और फ़ायरफ़ॉक्स में इसका परीक्षण किया और यह ठीक काम करता है। उम्मीद है की यह मदद करेगा!

स्रोत

2009-05-27 08:20:23 Rickster

धन्यवाद रिकस्टर। यह मुझे भी अच्छा काम करता है :) –

आप एक पृष्ठ और खुले, बंद पर कई संवाद बॉक्स का उपयोग करें और उन्हें फिर से खोलना निम्नलिखित काम करता है अच्छी तरह से करने की जरूरत है: आप अलग अलग है और

JS CODE: 
    $(".sectionHelp").click(function(){ 
     $("#dialog_"+$(this).attr('id')).dialog({autoOpen: false}); 
     $("#dialog_"+$(this).attr('id')).dialog("open"); 
    }); 

HTML: 
    <div class="dialog" id="dialog_help1" title="Dialog Title 1"> 
     <p>Dialog 1</p> 
    </div> 
    <div class="dialog" id="dialog_help2" title="Dialog Title 2"> 
     <p>Dialog 2 </p> 
    </div> 

    <a href="#" id="help1" class="sectionHelp"></a> 
    <a href="#" id="help2" class="sectionHelp"></a> 

CSS: 
    div.dialog{ 
     display:none; 
    }

स्रोत

2010-01-14 19:02:12 Jon

<script type="text/javascript"> 
// Increase the default animation speed to exaggerate the effect 
$.fx.speeds._default = 1000; 
$(function() { 
    $('#dialog1').dialog({ 
     autoOpen: false, 
     show: 'blind', 
     hide: 'explode' 
    }); 

    $('#Wizard1_txtEmailID').click(function() { 
     $('#dialog1').dialog('open'); 
     return false; 
    }); 
    $('#Wizard1_txtEmailID').click(function() { 
     $('#dialog2').dialog('close'); 
     return false; 
    }); 
    //mouseover 
    $('#Wizard1_txtPassword').click(function() { 
     $('#dialog1').dialog('close'); 
     return false; 
    }); 

}); 



///////////////////////////////////////////////////// 
<div id="dialog1" title="Email ID"> 
                               <p> 
                                (Enter your Email ID here.) 
                                <br /> 
                               </p> 
                          </div> 
//////////////////////////////////////////////////////// 

<div id="dialog2" title="Password"> 
                               <p> 
                                (Enter your Passowrd here.) 
                                <br /> 
                               </p> 
                           </div>

स्रोत

2010-04-02 18:26:17 Upali

यह एक छोटे से अधिक संक्षिप्त है भी की अनुमति देता है संवाद मूल्यों आदि अलग-अलग क्लिक घटनाओं पर आधारित:

$('#click_link').live("click",function() { 
    $("#popup").dialog({modal:true, width:500, height:800}); 

    $("#popup").dialog("open"); 

    return false; 
});

स्रोत

2010-04-09 00:03:46 djburdick

RaeLehman के समाधान काम करता है, तो आप केवल एक बार संवाद की सामग्री उत्पन्न करने के लिए (या केवल जावास्क्रिप्ट का उपयोग कर इसे संशोधित) चाहते हैं। यदि आप वास्तव में प्रत्येक बार संवाद को पुन: उत्पन्न करना चाहते हैं (उदा।, एक दृश्य मॉडल वर्ग और रेजर का उपयोग करके), तो आप $ ("। Ui-dialog-titlebar-close") के साथ सभी संवाद बंद कर सकते हैं।() पर क्लिक करें। और ऑटो ओपन सेट को अपने डिफ़ॉल्ट मान पर सेट छोड़ दें।

स्रोत

2011-03-28 21:00:11 Daniel

मेरा समाधान: कुछ init विकल्प (उदा। शो) को हटा दें, क्योंकि अगर कुछ काम नहीं कर रहा है तो कन्स्ट्रक्टर उपज नहीं करता है (पूर्व स्लाइड प्रभाव)। गतिशील एचटीएमएल प्रविष्टि रहित मेरे समारोह:

function ySearch(){ console.log('ysearch'); 
    $("#aaa").dialog({autoOpen: true,closeOnEscape: true, dialogClass: "ysearch-dialog",modal: false,height: 510, width:860 
    }); 
    $('#aaa').dialog("open"); 

    console.log($('#aaa').dialog("isOpen")); 
    return false; 
}

स्रोत

2012-06-23 09:59:04

मुझे भी इसी तरह के मुद्दों का सामना करना पड़ा। इस तरह मैं एक ही

$("#lnkDetails").live('click', function (e) { 

     //Create dynamic element after the element that raised the event. In my case a <a id="lnkDetails" href="/Attendance/Details/2012-07-01" /> 
     $(this).after('<div id=\"dialog-confirm\" />'); 

     //Optional : Load data from an external URL. The attr('href') is the href of the <a> tag. 
     $('#dialog-confirm').load($(this).attr('href')); 

     //Copied from jQueryUI site . Do we need this? 
     $("#dialog:ui-dialog").dialog("destroy"); 

     //Transform the dynamic DOM element into a dialog 
     $('#dialog-confirm').dialog({ 
      modal: true, 
      title: 'Details' 
     }); 

     //Prevent Bubbling up to other elements. 
     return false; 
    });

स्रोत

2012-08-22 08:34:27

हल करने के लिए करता है, तो आप अपारदर्शिता बदलने के लिए सभी संवाद तो jQuery-ui.css

/* Overlays */ 
.ui-widget-overlay 
{ 
    background: #5c5c5c url(images/ui-bg_flat_50_5c5c5c_40x100.png) 50% 50% repeat-x; 
    opacity: .50; 
    filter: Alpha(Opacity=80); 
}

स्रोत

2012-11-03 12:47:44

jQuery संवाद बॉक्स

उत्तर

संबंधित मुद्दे