लोड कई क्रियार्थ द्योतक गतिशील

Question

मैं अपने index.php पृष्ठ जो एक JQuery मोडल बॉक्स (डिफ़ॉल्ट रूप से छुपा)

मैं तो इस समारोह जो मोडल से पता चलता है और अपने शीर्षक और सामग्री भरता है पर HTML है।

जब मैं इसे कॉल करता हूं, तो यह किसी भी पिछली सामग्री को मोडल में बदल देता है क्योंकि इसमें एक ही आईडी है।

function CloseModal(reloadflag) { 
    reloadflag = reloadflag || ''; 

    $("#modal_page").fadeOut(); 

    if(reloadflag === 'Y') { 
     location.reload(); 
    } 
} 

मैं एक आईडी बनाने के बारे में सोचा:

वहाँ एक रास्ता मैं सभी के पीछे एक दूसरे को

function LoadModalBody(content, title) { 
    title = title || ''; 

    $("#modal_page").fadeIn("slow"); 
    $("#modal_title").html(title); 

    $("#modal_close_button").click(function(){ CloseModal(); }); 

    $("#modal_page_body").html(content); 

    //$("html, body").animate({ scrollTop: 0 }, "slow"); 
} 

समारोह एकाधिक दिखाने के लिए मॉडल को बंद करने के लिए गतिशील रूप क्रियार्थ द्योतक बना सकते हैं इस है है फ़ंक्शन के अंदर प्रत्येक मोडल के लिए, इसलिए वे अद्वितीय हैं और प्रत्येक को इस तरह प्रदर्शित करते हैं लेकिन मुझे यकीन नहीं है कि यह सबसे अच्छा तरीका है

Answer 1

समस्या यह है कि .html() सभी मोडल सामग्री को ओवरराइट करें, इसलिए इस फ़ंक्शन का उपयोग करते समय यह मोडल की सभी पिछली HTML सामग्री को हटा दें और .html() पर दिए गए सबसे हाल के फ़ील्ड के साथ इसे प्रतिस्थापित करें।

आप .html() के बजाय .append() का उपयोग कर सकते हैं।

मोडल डायलॉग पर गतिशीलता को जोड़ने के लिए एक सरल उदाहरण है।

function openDialog(titleDialog,content){ 
 
    $("#dialog").dialog({ 
 
    height: 520, 
 
    width: 400, 
 
    modal: true, 
 
    title: titleDialog, 
 
    
 
    open: function() { 
 
     \t $(this).append(content); 
 
      $("#testDiv").css("display","block"); 
 
     }, 
 
     buttons: { 
 
      Cancel: function() { 
 
       $(this).dialog("close"); 
 
      }, 
 
     \t Save:function(){ 
 
     \t \t 
 
     \t } 
 
     } 
 
    
 
    }); 
 
    } 
 
    
 
    $("#openDialog").on('click',function(){ 
 
    
 
    \t openDialog("some title",$("#testDiv")); 
 
    });

#testDiv{ 
 
    height:100px; 
 
    width:100px; 
 
    border: solid 2px; 
 
    display:none; 
 
} 
 

 
#dialog{ 
 
    border:solid 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
 

 
<div id="dialog"> 
 
</div> 
 

 
<button id="openDialog"> 
 
click to open 
 
</button> 
 

 
<div id="testDiv"> 
 

 
</div>

Answer 2

आप के अंदर कुछ संवाद एचटीएमएल स्कीमा के साथ एक संवाद कंटेनर बना सकते हैं और फिर एक समारोह है कि कि स्कीमा पर और निश्चित रूप से अंदर अपनी सामग्री होने के आधार पर नए संवाद पैदा करेगा बनाने के लिए:

एचटीएमएल

<div id="dialogs"> 
<div class="dialog-tmpl"> 
    <div class="dialog-body"></div> 
</div> 
</div> 

सीएसएस

.dialogs { 
    display:none; 
} 

जे एस

var createNewDialog = (title, body) => { 
    var $newDialog = $('#dialogs .dialog-tmpl').clone(); 
    $('.dialog-body', $newDialog).html(body); 
    $('#dialogs').append($newDialog); 
    $newDialog.dialog({ 
     'title': title 
    }); 
    return $newDialog; 
}; 

अब, जब आप एक नया संवाद खोलने के लिए चाहते हैं, तो आप सिर्फ मानकों के साथ इस समारोह फोन और आप एक नया संवाद मिला:

$('#open-dialog').on('click', function(e) { 
    var $dlg = createNewDialog('Dialog title', '<h3>Some HTML content</h3>'); 
}); 

आपके पास फ़ंक्शन द्वारा लौटाया गया नया संवाद होगा, ताकि आप संवाद पॉपअप को और अधिक कुशल बना सकें।

$dlg.dialog('close'); 

बेशक

आप का प्रबंधन करने के लिए कैसे आप संवाद तो संग्रहीत करेंगे: उदाहरण के लिए यदि आप एक संवाद को बंद करना चाहते हैं, तो आप अब संवाद इस तरह createNewDialog द्वारा दिया साथ जावास्क्रिप्ट चर का उपयोग करना होगा आप उन्हें अपने सभी कोड के माध्यम से एक्सेस कर सकते हैं। गतिशील तत्वों को नियंत्रित करने के कई तरीके हैं, आप प्रत्येक संवाद के लिए अद्वितीय आईडी भी निर्दिष्ट कर सकते हैं और बाद में इसका उपयोग करते समय इसका उपयोग कर सकते हैं।

आप काम कर रहे उदाहरण यहाँ पा सकते हैं: http://zikro.gr/dbg/html/jq-modal.html

Answer 3

आप अपने LoadModalBody समारोह के अंदर एक स्ट्रिंग चर में अपने पैनल कोड रखने के लिए और एक वैश्विक modal_id चर रख सकते से प्रत्येक के लिए एक विशिष्ट आईडी आवंटित करने के लिए अपने क्रियार्थ द्योतक तो पेरेंट तत्व को मोडल संलग्न:

var _modal_id = 1; 
function LoadModalBody(content, title) { 
    var div = "<div id='modal" + _modal_id + "' class='mymodal'>" + 
    // elements in your modal + 
    + "</div>"; 
    $("#modal_parent_element").append(div); 

    // other parts of the function 
} 

आप .mymodal वर्ग का उपयोग कर सकते या तो सभी को बर्खास्त करने एक बार में मॉडलों का या एक विशिष्ट मोडल बंद करने के लिए प्रत्येक आईडी का उपयोग करें।