2015-02-13 5 views
6

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

$scope.showPopup = function() { 
    $scope.data = {} 
// An elaborate, custom popup 
var myPopup = $ionicPopup.show({ 

title: 'Social Media Services', 

scope: $scope, 
buttons: [ 
{ 
type :'ion-social-facebook positive button-large', 

    onTap: function(e) { 
    // $cordovaSpinnerDialog.show("aaa", "aaaa"); 
     window.open('https://www.facebook.com/BinDawood.Co', '_system', 'location=yes'); 
    } 
    }, 
    { type :'ion-social-twitter calm', 
    onTap: function(e) { 
    // $cordovaSpinnerDialog.show("aaa", "aaaa"); 
     window.open('https://twitter.com/BinDawoodco', '_system', 'location=yes'); 
    } 
    }, 
    { type :'ion-social-pinterest assertive', 
    onTap: function(e) { 
    // $cordovaSpinnerDialog.show("aaa", "aaaa"); 
     window.open('http://pinterest.com/bindawoodco', '_system', 'location=yes'); 
    } 
    }, 

] 
}); 
myPopup.then(function(res) { 
    console.log('Tapped!', res); 
}); 

}; 

ऐसा करने के लिए मैं अपने कोड को कैसे संशोधित कर सकता हूं?

उत्तर

4

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

http://ionicframework.com/docs/api/service/ $ ionicModal/

5

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

तो मैं एक सेवा बनाया पृष्ठभूमि पर क्लिक करके एक पॉपअप बंद करने में सक्षम हो और बना यह Github पर उपलब्ध: https://github.com/mvidailhet/ionic-close-popup

लोगों के लिए चीजों को आसान, जिन्होंने इस सुविधा चाहते हैं बनाने के लिए, मैं इसे उपलब्ध कराया बोवर रजिस्ट्री में।

बोवर के साथ स्थापित करें:

angular.module('app', ['ionic', 'ionic.closePopup']) 

रजिस्टर closePopupService सेवा करने के लिए अपने नव निर्मित पॉपअप:

var alertPopup = $ionicPopup.alert({ 
    title: 'Alert popup', 
    template: 'Tap outside it to close it' 
}); 
IonicClosePopupService.register(alertPopup); 

$ bower install ionic-close-popup 

यदि आपके ऐप की निर्भरता में ionic.closePopup मॉड्यूल शामिल करें

यहां एक कोड कोड है जो लाइव कोड दिखा रहा है: http://codepen.io/mvidailhet/pen/JYwYEE

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

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