मैं कोणीय यूआई बूटस्ट्रैप में मोडल चौड़ाई कैसे बढ़ाऊं?

Question

मैं एक मॉडल बना रहा हूं:

var modal = $modal.open({
                    templateUrl: "/partials/welcome",
                    controller: "welcomeCtrl",
                    backdrop: "static",
                    scope: $scope,
                });

क्या इसकी चौड़ाई बढ़ाने का कोई तरीका है?

Comments

के संभावित डुप्लिकेट मैं IE8 में एक बूटस्ट्रैप 3 मॉडल की चौड़ाई कैसे बदल सकता हूँ?

— जॉनीएचके

आप हमेशा सीएसएस का उपयोग करके चौड़ाई बदल सकते हैं।

— एलेक्स चोरोशिन

Answer 1

मैं मॉडल-संवाद वर्ग को लक्षित करने के लिए एक सीएसएस वर्ग का उपयोग करता हूं:

.app-modal-window .modal-dialog {
  width: 500px;
}

फिर मोडल विंडो को कॉल करने वाले कंट्रोलर में windowClass सेट करें:

    $scope.modalButtonClick = function () {
        var modalInstance = $modal.open({
            templateUrl: 'App/Views/modalView.html',
            controller: 'modalController',
            windowClass: 'app-modal-window'
        });
        modalInstance.result.then(
            //close
            function (result) {
                var a = result;
            },
            //dismiss
            function (result) {
                var a = result;
            });
    };

Comments

यह बहुत अच्छा है, मुझे नहीं पता था कि इसे भी लागू किया जाना चाहिए.modal-dialog

— जानूस

Css को .app-modal-window और .modal-dialog दोनों पर लागू किया जाना चाहिए, इसलिए: .app-modal-window, .modal-dialog {चौड़ाई: 500px; }

— अलेक्जेंडर

@Alexander मेरे परीक्षणों के अनुसार नहीं, मोडल-डायलॉग के मूल तत्व की चौड़ाई को जोड़कर इसे पूरा करता है।

— रॉब जे

@RobJacobs माफ करना, मैंने उल्लेख नहीं किया कि मैं 2.3.2 बूस्ट का उपयोग करता हूं। मुझे लगता है कि यही कारण है कि मुझे दोनों .app-modal-window और .modal-dialog

— अलेक्जेंडर

@ZeroDistraction परिभाषित विंडोक्लास को modalWindow डायरेक्टिव - लिंक फ़ंक्शन में तत्व वर्ग विशेषता में जोड़ा जाता है, जो संकलन चरण के बाद होता है, इसलिए 'C' निर्देश संकलित नहीं होता है।

— रॉब जे।

Answer 2

एक और आसान तरीका है कि आप अपने HTML में फ़ंक्शन को कॉल करते समय 2 प्रीमियर आकार का उपयोग करें और उन्हें पैरामीटर के रूप में पास करें। उपयोग: बड़े मॉडल्स के लिए चौड़ाई 900px 'sm' के साथ छोटे मोडल के लिए चौड़ाई 300px या चौड़ाई के साथ कोई पैरामीटर जिसे आप डिफ़ॉल्ट आकार का उपयोग करते हैं जो कि 600px है।

उदाहरण कोड:

$scope.openModal = function (size) {
var modal = $modal.open({
                templateUrl: "/partials/welcome",
                controller: "welcomeCtrl",
                backdrop: "static",
                scope: $scope,
                size: size,
            });
modal.result.then(
        //close
        function (result) {
            var a = result;
        },
        //dismiss
        function (result) {
            var a = result;
        });
};

और html में मैं कुछ इस तरह का प्रयोग करूंगा:

<button ng-click="openModal('lg')">open Modal</button>  

Comments

मैं ज्यादातर मामलों में पाता हूं, पहले से बनाए गए आकार मेरे लिए जरूरी हैं। कुछ कस्टम सीएसएस प्रदर्शन नहीं करने के लिए +1!

— Kilhoffer

एक जादू की तरह काम करता है। मौजूदा अंतर्निहित सीएसएस आकारों पर स्पष्ट करने के लिए धन्यवाद।

— किंग्स

Answer 3

आप विशेष रूप से व्यापक व्यूपोर्ट रिज़ॉल्यूशन के लिए अपने पॉपअप के लिए .modal-lg वर्ग के लिए कस्टम चौड़ाई निर्दिष्ट कर सकते हैं। यहां है कि इसे कैसे करना है:

सीएसएस:

@media (min-width: 1400px){

   .my-modal-popup .modal-lg {
       width: 1308px;
   }       

}

जे एस:

var modal = $modal.open({
    animation: true,
    templateUrl: 'modalTemplate.html',
    controller: 'modalController',
    size: 'lg',
    windowClass: 'my-modal-popup'
});

Comments

समाधान अच्छा है, लेकिन मेरे लिए CSS सिंटैक्स सही नहीं है। मुझे सीएसएस को समायोजित करना होगा।

— जियानवु चेन

Answer 4

जब हम एक मोडल खोलते हैं तो यह एक पैरामेंटर के रूप में आकार स्वीकार करता है:

इसके आकार के संभावित मान: sm, md, lg

$scope.openModal = function (size) {
var modal = $modal.open({
      size: size,
      templateUrl: "/app/user/welcome.html",
      ...... 
      });
}

HTML:

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('sm')">Small Modal</button>

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('md')">Medium Modal</button>

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('lg')">Large Modal</button>

यदि आप कोई विशिष्ट आकार चाहते हैं, तो मॉडल HTML पर शैली जोड़ें:

<style>.modal-dialog {width: 500px;} </style>

Answer 5

वहाँ एक और तरीका है जो आपको uibModal वर्गों को अधिलेखित करने की आवश्यकता नहीं है और यदि आवश्यक हो तो उनका उपयोग करें: आप अपने स्वयं के आकार प्रकार "xlg" के साथ $ uibModal.open फ़ंक्शन को कॉल करते हैं और फिर आप नीचे दिए गए "modal-xlg" नामक वर्ग को परिभाषित करते हैं। :

.modal-xlg{
   width:1200px;
}

$ uibModal.open को इस रूप में कॉल करें:

 var modalInstance = $uibModal.open({
                ...  
                size: "xlg",
            });

और यह काम करेगा। क्योंकि जो भी स्ट्रिंग आप आकार के बूटस्ट्रैप के रूप में पास करते हैं, वह इसे "मोडल-" के साथ जोड़ देगा और यह विंडो के लिए कक्षा की भूमिका निभाएगा।

Answer 6

मैंने बूटस्ट्रैप-यूआई से सिर्फ टेम्पलेट लेना आसान समझा। मैंने अभी भी इन-प्लेस किए गए HTML को दिखाने के लिए छोड़ दिया है कि मैंने क्या बदला है।

उनके डिफ़ॉल्ट टेम्पलेट को अधिलेखित करें:

<script type="text/ng-template" id="myDlgTemplateWrapper.html">
    <div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" 
         ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)"> 
        <!-- <div class="modal-dialog"
            ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"
            >
            <div class="modal-content"  modal-transclude></div>
        </div>--> 

        <div modal-transclude>
            <!-- Your content goes here -->
        </div>
    </div>
</script>

अपने संवाद टेम्पलेट को संशोधित करें ("मोडल-डायलॉग" क्लास और "मोडल-कंटेंट" क्लास वाले रैपर DIV को नोट करें):

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-dialog {{extraDlgClass}}"
         style="width: {{width}}; max-width: {{maxWidth}}; min-width: {{minWidth}}; ">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h3>I am a more flexible modal!</h3>
            </div>
            <div class="modal-body"
                 style="min-height: {{minHeight}}; height: {{height}}; max-height {{maxHeight}}; ">
                <p>Make me any size you want</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </div>
</script>

और फिर आप जो भी सीएसएस वर्ग या शैली के मापदंडों को बदलना चाहते हैं, उसे बदलें (यह मानते हुए कि आपने पहले से "कहीं और" "परिभाषित किया है"):

<script type="text/javascript">
    app.controller("myTest", ["$scope", "$modal", function ($scope, $modal)
    {
        //  Adjust these with your parameters as needed

        $scope.extraDlgClass = undefined;

        $scope.width = "70%";
        $scope.height = "200px";
        $scope.maxWidth = undefined;
        $scope.maxHeight = undefined;
        $scope.minWidth = undefined;
        $scope.minHeight = undefined;

        $scope.open = function ()
        {
            $scope.modalInstance = $modal.open(
            {
                backdrop: 'static',
                keyboard: false,
                modalFade: true,

                templateUrl: "myModalContent.html",
                windowTemplateUrl: "myDlgTemplateWrapper.html",
                scope: $scope,
                //size: size,   - overwritten by the extraDlgClass below (use 'modal-lg' or 'modal-sm' if desired)

                extraDlgClass: $scope.extraDlgClass,

                width: $scope.width,
                height: $scope.height,
                maxWidth: $scope.maxWidth,
                maxHeight: $scope.maxHeight,
                minWidth: $scope.minWidth,
                minHeight: $scope.minHeight
            });

            $scope.modalInstance.result.then(function ()
            {
                console.log('Modal closed at: ' + new Date());
            },
            function ()
            {
                console.log('Modal dismissed at: ' + new Date());
            });
        };

        $scope.ok = function ($event)
        {
            if ($event)
                $event.preventDefault();
            $scope.modalInstance.close("OK");
        };

        $scope.cancel = function ($event)
        {
            if ($event)
                $event.preventDefault();
            $scope.modalInstance.dismiss('cancel');
        };

        $scope.openFlexModal = function ()
        {
            $scope.open();
        }

    }]);
</script>

एक "खुला" बटन जोड़ें और दूर आग।

    <button ng-controller="myTest" class="btn btn-default" type="button" ng-click="openFlexModal();">Open Flex Modal!</button>

अब आप जो चाहें अतिरिक्त क्लास जोड़ सकते हैं, या बस आवश्यकतानुसार चौड़ाई / ऊंचाई आकार बदल सकते हैं।

मैंने आगे इसे एक आवरण निर्देश के भीतर संलग्न किया, जिसे इस बिंदु से आगे तुच्छ होना चाहिए।

चीयर्स।

Answer 7

मैंने दिमित्री कोमिन समाधान का उपयोग करके समस्या को हल किया, लेकिन विभिन्न सीएसएस सिंटैक्स के साथ यह सीधे ब्राउज़र में काम करता है।

सीएसएस

@media(min-width: 1400px){
    .my-modal > .modal-lg {
        width: 1308px;
    }
}

जेएस ही है:

var modal = $modal.open({
    animation: true,
    templateUrl: 'modalTemplate.html',
    controller: 'modalController',
    size: 'lg',
    windowClass: 'my-modal'
});

Answer 8

कोणीय मोडल के आकार की संपत्ति का उपयोग करके आप इसे बहुत ही सरल तरीके से कर सकते हैं।

var modal = $modal.open({
                    templateUrl: "/partials/welcome",
                    controller: "welcomeCtrl",
                    backdrop: "static",
                    scope: $scope,
                    size:'lg' // you can try different width like 'sm', 'md'
                });

Answer 9

यदि आप डिफ़ॉल्ट बड़े आकार के साथ जाना चाहते हैं, तो आप 'modal-lg' जोड़ सकते हैं:

var modal = $modal.open({
          templateUrl: "/partials/welcome",
          controller: "welcomeCtrl",
          backdrop: "static",
          scope: $scope,
          windowClass: 'modal-lg'
});

Answer 10

कोणीय 5 के लिए मोडल-संवाद पर अधिकतम-चौड़ाई का उपयोग करें

.mod-class .modal-dialog {
    max-width: 1000px;
}

और windowClass का उपयोग अन्य लोगों द्वारा अनुशंसित टीएस जैसे:

this.modalService.open(content, { windowClass: 'mod-class' }).result.then(
        (result) => {
            // this.closeResult = `Closed with: ${result}`;
         }, (reason) => {
            // this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

इसके अलावा, मुझे css कोड को वैश्विक शैलियों> styl.css में डालना था।