अंधेरे पृष्ठ पर मॉडेल डीआईवी प्रदर्शित करें

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

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

मेरे पास सबसे बड़ी समस्या मोडल पॉपअप div कोड के साथ है। मुझे यकीन है कि मैं चेकबॉक्स/टेक्स्टबॉक्स कार्यक्षमता को ठीक से समझ सकता हूं, लेकिन मैं पॉपअप को सही तरीके से काम करने में असमर्थ हूं।

क्या किसी के पास ऐसा करने का कोई आसान तरीका है? वर्तमान में, इससे पहले कि मैंने इस पर गड़बड़ करना शुरू किया, मेरे पास सभी इनपुट नियंत्रणों के साथ एक साधारण रूप है।

स्रोत

2013-03-27 Mark Highfield

आप jQuery यूआई का उपयोग कर रहे ? –

हां, मैं इस परियोजना में JQuery का उपयोग कर रहा हूँ। –

[jQuery UI] (http://jqueryui.com) jQuery के शीर्ष पर एक लाइब्रेरी है। यकीन नहीं है कि क्या आप इसका मतलब है या नहीं। इसमें एक मोडल संवाद है। यदि आप लोगों को मदद करना चाहते हैं, तो भी जो भी कोड आपके पास है, पोस्ट करें, भले ही यह काम न करे। –

दिखाया गया है here मोडल संवाद का उपयोग करें:

<!doctype html> 

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Dialog - Modal confirmation</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
$(function() { 
$("#dialog-confirm").dialog({ 
    resizable: false, 
    height:140, 
    modal: true, 
    buttons: { 
    "Delete all items": function() { 
     $(this).dialog("close"); 
    }, 
    Cancel: function() { 
     $(this).dialog("close"); 
    } 
    } 
}); 
}); 
</script> 
</head> 
<body> 

<div id="dialog-confirm" title="Empty the recycle bin?"> 
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;">  
</span>These items will be permanently deleted and cannot be recovered. Are you sure? </p> 
</div> 

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> 


</body> 
</html>

स्रोत

2013-03-27 14:55:18

धन्यवाद, यह बहुत अच्छा काम करता है! अब चेक किए गए चेकबॉक्स टेक्स्ट के आधार पर क्लिक किए गए टेक्स्टबॉक्स पर डेटा लिखने के लिए "ठीक" बटन कैसे सेट किया जा सकता है? –

इस तरह की http://jsfiddle.net/Cyberjetx/QGuz8/ उत्तर का हिस्सा http://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery से आया था –

ऐसा करने का सबसे आसान तरीका jQuery UI का उपयोग करना है। इसमें एक "संवाद" इंटरफ़ेस है जो बहुत आसान और कार्यान्वित करने में आसान है। कि कवर होगा:

एक DIV कि यह सिर्फ एक काले रंग की तय बॉक्स (स्थिर स्थिति) है बनाएँ:

आप बल्कि हाथ से यह कर चाहते हैं तो दूसरी तरफ है, तो है कि एक अलग कहानी है पृष्ठ। यह आपकी पृष्ठभूमि होगी। सुनिश्चित करें कि यह पहले दिखाई नहीं दे रहा है (सेट डिस्प्ले: कोई नहीं)
एक और निश्चित डीआईवी बनाएं जो आपके संवाद को प्रदर्शित करेगा। इसे स्टाइल करें ताकि आपका संवाद आपकी ब्राउज़र विंडो के केंद्र में प्रदर्शित हो सके।
जावास्क्रिप्ट (या अतिरिक्त प्रभावों के लिए jQuery) का उपयोग करके, अपने बटन पर क्लिक होने पर आपका काला DIV और संवाद DIV दिखाई दें।

स्रोत

2013-03-27 14:48:42 Savv

इस http: // jsfiddle की तरह।नेट/8Es24/ –

जो वास्तविक दिखता है – Savv

तुम सिर्फ इस उद्देश्य के लिए पूरी jQuery ui पुस्तकालय जोड़ने के लिए नहीं कर सकते हैं। अगर मैं यहाँ हूँ, तो आप इसे कैसे करेंगे।

तो, जब आप उस इनपुट पर ध्यान केंद्रित करते हैं - तो इसे 'ओपन मोडल' कहते हैं - आप मोडल खोलना चाहते हैं। "लंबा" कोड के बावजूद यह बहुत सरल और स्वयं व्याख्यात्मक है। दरअसल, इसमें से अधिकांश मोडल/मोडल उपस्थिति को सुंदर बनाने के लिए बस वहां है। ये हम चले:

HTML:

<!-- the input --> 
<input class="opensModal" type="text" /> 

<!-- the modal and its overlay --> 
<div class="modalOverlay is-inactive"> 
    <div class="modal"> 
     <input type="checkbox" /> 
     <input type="checkbox" /> 
     <button>Ok</button> 
     <button>Cancel</button> 
    </div> 
</div>

सीएसएस:

.modalOverlay { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    -webkit-transition: 0.6s; 
} 

.modalOverlay.is-inactive { 
    visibility: hidden; 
    background: rgba(0, 0, 0, 0); 
} 

.modalOverlay.is-active { 
    visibility: visible; 
    background: rgba(0, 0, 0, 0.4); 
} 

.modal { 
    margin: 100px auto; 
    background: #fff; 
    width: 100px; 
    padding: 20px; 
    -webkit-transition: 0.4s 0.6s; 
} 

.modalOverlay.is-inactive .modal { 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transform: scale(0.1); 
} 

.modalOverlay.is-active .modal { 
    visibility: visible; 
    opacity: 1; 
    -webkit-transform: scale(1); 
}

jQuery (जावास्क्रिप्ट)

(function() { 
    var $modal = $('.modalOverlay'), 
     openModal = function() { 
      $modal 
       .removeClass('is-inactive') 
       .addClass('is-active'); 
     }, 
     closeModal = function() { //use it wherever you want 
      $modal 
       .removeClass('is-active') 
       .addClass('is-inactive'); 
     }, 
     onDocReady = function() { 
      $('.opensModal').on('focus', openModal); 
     }; 

    $(onDocReady); 
})();

यहाँ एक बेला है: http://jsfiddle.net/2edPZ/3/

स्रोत

2013-03-27 14:55:53 banzomaikaka

अंधेरे पृष्ठ पर मॉडेल डीआईवी प्रदर्शित करें

उत्तर

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