বুটস্ট্র্যাপ-ইউআই থেকে টেমপ্লেটটি গ্রহণ করা আমার পক্ষে সহজ হয়েছে। আমি কী পরিবর্তন করেছি তা দেখানোর জন্য আমি মন্তব্য করা এইচটিএমএলটিকে এখনও স্থির রেখেছি।
তাদের ডিফল্ট টেম্পলেটটি ওভাররাইট করুন:
<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>
আপনার ডায়ালগ টেমপ্লেটটি সংশোধন করুন ("মোডাল-ডায়ালগ" শ্রেণি এবং "মডেল-সামগ্রী" শ্রেণিযুক্ত র্যাপার ডিআইভিগুলি নোট করুন):
<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>
এখন আপনি যা চান অতিরিক্ত ক্লাস যুক্ত করতে পারেন বা প্রস্থ / উচ্চতার আকারগুলি প্রয়োজনীয় হিসাবে পরিবর্তন করতে পারেন।
আমি এটিকে আরও একটি মোড়কের দিকনির্দেশক মধ্যে আবদ্ধ করে রেখেছি, যা এদিক থেকে সামান্য হওয়া উচিত।
চিয়ার্স।