Javascript 点击即可显示全屏图像

我正在使用Ionic构建一个移动应用程序。创建了与此类似的布局-->

如何在用户单击图像时全屏显示卡图像，并在再次单击时恢复正常

请在下面查找现有代码： home-ctrl.js

(function () {
'use strict';

angular.module('testApp').controller('HomeCtrl', ['$scope', 'collegeApi', '$ionicModal', HomeCtrl]);

function HomeCtrl($scope, collegeApi, $ionicModal) {
    var vm = this;

    vm.imgList = [
        {
            name: 'slider2.jpg'
    },
        {
            name: 'slider3.jpg'
    },
        {
            name: 'slider4.jpg'
    },
        {
            name: 'slider5.jpg'
    }];


    $scope.homeEvents = collegeApi.getHomeData();
    console.log($scope.homeEvents);



};

})（）

home.html

<ion-view view-title="Home" ng-controller="HomeCtrl as vm">
<ion-content>
    <ion-slide-box>
        <ion-slide ng-repeat="img in vm.imgList">
            <img ng-src="http://lorempixel.com/400/200/" class="full-image">
        </ion-slide>
    </ion-slide-box>

    <div class="list card back-color" ng-repeat="homeEvent in homeEvents">

        <div ng-switch="homeEvent.type">
            <div ng-switch-when='star'>
                <div class="item item-icon-left item-energized">
                    <i class="icon ion-star light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-when="event">
                <div class="item item-icon-left item-calm">
                    <i class="icon ion-android-calendar light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-when="sport">
                <div class="item item-icon-left item-balanced">
                    <i class="icon ion-android-bicycle light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-default>
                <div class="item item-icon-left item-dark">
                    <i class="icon ion-star light"></i>
                    <h2 class="light font-size-1">
          Header</h2>
                </div>
            </div>
        </div>



        <div class="item item-body">
            <img class="full-image" src="http://lorempixel.com/400/200/" ng-click="buttonClick('img/conference.jpg')">
            <p>
                <div class="text-justify" data-markdown="{{homeEvent.details}}"></div>
            </p>

        </div>
        <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#">
                <i class="icon ion-share"></i> Share
            </a>
        </div>


    </div>



</ion-content>

标题
标题
标题
标题

以下是屏幕截图：

---

遵循这些步骤，希望对您有所帮助

首先在.HTML文件中使用此脚本

 <script id="modal.html" type="text/ng-template">
                        <div class="modal" ng-click="closeModal()">
                        <ion-content>
                        <img src="{{imgUrl}}" style="display:block; width:100%; max-width:600px; margin:auto"/>
                        </ion-content>
                        </div>
                    </script>

在CSS文件中使用第三个

.modal .scroll {
height: 100% !important;
background-color: black !important;

display: -webkit-box !important;
display: -moz-box !important;
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;

-webkit-box-direction: normal !important;
-moz-box-direction: normal !important;
-webkit-box-orient: horizontal !important;
-moz-box-orient: horizontal !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;


-webkit-box-align: center !important;
-moz-box-align: center !important;
-webkit-align-items: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}

编辑：

---

只需将代码复制并粘贴到文件中，然后将imgeURI的参数更改为图像URL。java脚本自动调用id

modal.html

，并在图像视图上单击使用

ng-click="openModal(imageUrl)"

根据得到了解决方案

以下是更新的代码：

我的控制器：

(function () {
'use strict';

angular.module('testApp').controller('HomeCtrl', ['$scope', 'collegeApi', '$ionicModal', HomeCtrl]);

function HomeCtrl($scope, collegeApi, $ionicModal) {
    var vm = this;

    vm.imgList = [
        {
            name: 'slider2.jpg'
    },
        {
            name: 'slider3.jpg'
    },
        {
            name: 'slider4.jpg'
    },
        {
            name: 'slider5.jpg'
    }];


    $scope.homeEvents = [
        {
            type: 'star',
            name: 'Awesome'
    },
        {
            type: 'sport',
            name: 'Rocks'
    },
        {
            type: 'event',
            name: 'New event'
    },
        {
            type: 'other',
            name: 'Lorem'
    }];


    $ionicModal.fromTemplateUrl('modal.html', function (modal) {
        $scope.gridModal = modal;
    }, {
        scope: $scope,
        animation: 'slide-in-up'
    })
    $scope.openModal = function (data) {
        $scope.inspectionItem = data;
        $scope.gridModal.show();
    }
    $scope.closeModal = function () {
        $scope.gridModal.hide();
    }

    };
})();

我的HTML：

<ion-view view-title="Home" ng-controller="HomeCtrl as vm">
<ion-content>
    <ion-slide-box>
        <ion-slide ng-repeat="img in vm.imgList">
            <img ng-src="http://lorempixel.com/400/200/" class="full-image">
        </ion-slide>
    </ion-slide-box>

    <div class="list card back-color" ng-repeat="homeEvent in homeEvents">

        <div ng-switch="homeEvent.type">
            <div ng-switch-when='star'>
                <div class="item item-icon-left item-energized">
                    <i class="icon ion-star light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-when="event">
                <div class="item item-icon-left item-calm">
                    <i class="icon ion-android-calendar light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-when="sport">
                <div class="item item-icon-left item-balanced">
                    <i class="icon ion-android-bicycle light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-default>
                <div class="item item-icon-left item-dark">
                    <i class="icon ion-star light"></i>
                    <h2 class="light font-size-1">
          Header</h2>
                </div>
            </div>
        </div>



        <div class="item item-body">
            <img class="full-image" src="http://lorempixel.com/400/200/" ng-click="openModal('http://lorempixel.com/400/200/')">
            <p>
                <div class="text-justify" data-markdown="{{homeEvent.details}}"></div>
            </p>

        </div>
        <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#">
                <i class="icon ion-share"></i> Share
            </a>
        </div>


    </div>

    <script id="modal.html" type="text/ng-template">
        <div class="modal" ng-click="closeModal()">
            <ion-content>
                <img src="http://lorempixel.com/400/200/" style="display:block; width:100%; max-width:600px; margin:auto" />
            </ion-content>
        </div>
    </script>

</ion-content>

---

你能给我们看看你的密码吗？或者更好，创建一个或？添加代码和屏幕截图。对不起，我是新来的。无法提供inline imageHi，谢谢您的帮助。我修改了上面的代码，但是如何从图像调用模态单击。只需将代码复制并粘贴到文件中，并将imgeURI的参数更改为图像URL。java脚本自动调用id

modal.html

并在图像视图上单击use

ng click=“openModal（imageUrl）”

非常感谢：-）。它起作用了。我还发现一个链接提供了类似的解决方案，非常好，所以现在你可以批准我的答案，以便其他人可以使用，而且不要忘了检查这个答案（我想你已经批准了，但有待检查）。。享受爱奥尼亚，这是开发开源应用程序的绝佳平台。这是一个很好的解决方案。尽管你能解释一下当我们从

$IonicModel

本身内部调用此

OpenModel（imageUrl）

时会发生什么吗？如果APK应用程序的答案对你有帮助，别忘了对它进行升级。你会成功的。：）你仍然可以接受一个答案。

<ion-view view-title="Home" ng-controller="HomeCtrl as vm">
<ion-content>
    <ion-slide-box>
        <ion-slide ng-repeat="img in vm.imgList">
            <img ng-src="http://lorempixel.com/400/200/" class="full-image">
        </ion-slide>
    </ion-slide-box>

    <div class="list card back-color" ng-repeat="homeEvent in homeEvents">

        <div ng-switch="homeEvent.type">
            <div ng-switch-when='star'>
                <div class="item item-icon-left item-energized">
                    <i class="icon ion-star light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-when="event">
                <div class="item item-icon-left item-calm">
                    <i class="icon ion-android-calendar light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-when="sport">
                <div class="item item-icon-left item-balanced">
                    <i class="icon ion-android-bicycle light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-default>
                <div class="item item-icon-left item-dark">
                    <i class="icon ion-star light"></i>
                    <h2 class="light font-size-1">
          Header</h2>
                </div>
            </div>
        </div>



        <div class="item item-body">
            <img class="full-image" src="http://lorempixel.com/400/200/" ng-click="openModal('http://lorempixel.com/400/200/')">
            <p>
                <div class="text-justify" data-markdown="{{homeEvent.details}}"></div>
            </p>

        </div>
        <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#">
                <i class="icon ion-share"></i> Share
            </a>
        </div>


    </div>

    <script id="modal.html" type="text/ng-template">
        <div class="modal" ng-click="closeModal()">
            <ion-content>
                <img src="http://lorempixel.com/400/200/" style="display:block; width:100%; max-width:600px; margin:auto" />
            </ion-content>
        </div>
    </script>

</ion-content>

.modal .scroll {
height: 100% !important;
background-color: black !important;
display: -webkit-box !important;
display: -moz-box !important;
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;
-webkit-box-direction: normal !important;
-moz-box-direction: normal !important;
-webkit-box-orient: horizontal !important;
-moz-box-orient: horizontal !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
-webkit-box-align: center !important;
-moz-box-align: center !important;
-webkit-align-items: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}