Gray Square on Modal Hide Ionic V1

Have anyone of you guys ever experienced this when you hide your modal?, i cant click it with my developer tool which is sad. Anyways TIA!

Where do you place the Modal HTML inside your HTML code and what is the code you have used to hide the modal

the modal is an external file
image.
This is the code that i use to declare and to hide it i use
$scope.moreInfoModal.hide()

Thanks!

please post the moreInfoModal.html for others to see/check what was the root of your problem…

<style>
    .form-wrapper{
      width:100%;
      display:inline-block;
      border:1px solid #ddd;
      position:relative;
      margin: 5px 0px;
    }
    
    .form-wrapper 
    input,
    button {
        background-color:transparent;
        border:0;
        padding: 5px;
    }
    
    .form-wrapper input{
      width:80%;
      padding-right:30px; /* button padding */
    }
    
    .form-wrapper button{
        position:absolute;
        width:15%;
        right:0;
        top:0;
    }
    
    </style>
    


<ion-modal-view>
    <ion-header-bar>
        <h1 class="title">More info of {{pickedItem.ItemCode}}
            <span style="float:right; cursor:pointer" ng-click="moreInfoModal.hide()"><span class="icon ion-close"></span></span>
        </h1>
    </ion-header-bar>
    <ion-content class="padding">

        <p> Location :<strong> {{pickedItem.LocationCode}}</strong></p>
        <p> Description :<strong> {{pickedItem.ItemDescription}}</strong></p>
        <p> BL No. : <strong>{{pickedItem.PalleteNo}}</strong></p>
        <p> MFG Date : <strong>{{pickedItem.ManufacturingDate | date}}</strong></p>
        <p> Expiry Date :<strong> {{pickedItem.ExpiryDate | date}}</strong></p>
        <p> Lot No. :<strong> {{pickedItem.ActualLotNumber}}</strong></p>
        <p>{{pickedItem.StorageUnit}}</p>

        <div class="form-wrapper">
            <input class="form-control" id="lotCode" ng-model="pickDetail.lot" type="text" placeholder="Lot"/><button ng-click="pickDetail.lot = ''"  set-focus="lotCode">Clear</button>
        </div>


        <form name="PalleteModal">
            <ion-list>
                <ion-checkbox ng-click="filterQty()" ng-model="filter.qty">Pick All</ion-checkbox>
                <label class="item item-input item-stacked-label">
                  <span class="input-label">{{pickedItem.ToPick}}</span><br>
                  <span style="color:#444;font-size:16px">Enter Qty not pick in {{pickedItem.Uom}}</span>
                    <input type="number" name="qty" placeholder="Enter quantity not picked" ng-model="pickDetail.qty" min="1" max="{{pickedItem.TransactionQty - 1}}" placeholder="Quantity" ng-disabled="filter.qty" ng-required="!filter.qty">
                    <span class="input-label">Actual Qty picked in {{pickedItem.Uom}} : {{pickedItem.TransactionQty - pickDetail.qty}}</span>
                </label>
               
            </ion-list>
           
            <button class="button button-block button-positive" ng-click="PickItem(pickedItem.PalleteNo)" ng-disabled="PalleteModal.qty.$invalid">Pick Item </button>
        </form>

    </ion-content>
</ion-modal-view>


can you inspect element it within the chrome debugger?

No, that’s whats hard about it hahaha.

but when you touch the screen or move the list a little sometimes it will disappear

you should try to replicate it in codepen… then maybe others can see or fix it for you