How to make dynamic bootstrap modal work on Iphones? - php

Question

There is problem in opening bootstrap modal in iphones.
If i use static modal like below,
<a href="#responsive" data-toggle="modal"><button class="btn btn-green ">Add Product<i class="fa fa-plus"></i></button>
</a>
<!-- start: BOOTSTRAP EXTENDED MODALS -->
<div id="responsive" class="modal extended-modal fade no-display">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title" style="color:red">Add New Product</h4>
</div>
<div class="modal-body">
<div class="row">
<form name="new" action="<?php echo base_url() ?>admin/addProduct" method="post" enctype="multipart/form-data" autocomplete="off">
<div class="col-md-6">
<h4><b>Category Name <span class="symbol required"></span></b></h4>
<p>
<select class="form-control" name="cat_id" required>
<option value="">---- Select Category ----</option>
<?php foreach($cat['list'] as $rows=>$value){ ?>
<option value="<?php echo $cat['list'][$rows]->cat_id; ?>"><?php echo ucwords($cat['list'][$rows]->cat_name); ?></option>
<?php } ?>
</select>
</p>
</div>
<div class="col-md-6">
<h4><b>Product Name <span class="symbol required"></span></b></h4>
<p>
<input class="form-control" type="text" name="item_name" required>
</p>
</div>
<div class="col-md-6">
<h4><b>Small Description <span class="symbol required"></span></b></h4>
<p>
<input class="form-control" type="text" name="small_desc">
</p>
</div>
<div class="col-md-6">
<h4><b>Quantity<span class="symbol required"></span></b></h4>
<p>
<input class="form-control" type="number" name="quantity" required min="1">
</p>
</div>
<div class="col-md-6">
<h4><b>Customer Price<span class="symbol required"></span></b></h4>
<p>
<input class="form-control" type="number" name="price" required min="1">
</p>
</div>
<div class="col-md-6">
<h4><b>Reseller Price<span class="symbol required"></span></b></h4>
<p>
<input class="form-control" type="number" name="reseller" required min="1">
</p>
</div>
<div class="col-md-6">
<h4><b>Color<span class="symbol "></span></b></h4>
<p>
<input class="form-control" type="text" name="color">
</p>
</div>
<div class="col-md-6">
<h4><b>Availability <span class="symbol required"></span></b></h4>
<select class="form-control" name="availability">
<option value="1">Available</option>
<option value="0">Not Available</option>
</select>
</div>
<div class="col-md-6">
<h4><b>Image <span class="symbol required"></span></b></h4>
<p>
<input class="form-control" accept="image/*" onchange="loadFile(event)" type="file" name="userfile" required multiple>
<img id="output" width="100px" height="100px" />
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" data-dismiss="modal" class="btn btn-light-grey">
Close
</button>
<button type="submit" class="btn btn-blue">
Add Product
</button>
</div>
</form>
</div>
</div>
</div>
<!-- End Modal -->
the modal will open properly and i can enter values.
But if use the modal for editing like below,
<a href="#edit<?php echo $product['list'][$row]->item_id; ?>" data-toggle="modal">
<button class="btn btn-blue"><i class="fa fa-pencil"></i> Edit </button>
</a>
<div id="edit<?php echo $product['list'][$row]->item_id?>" class="modal extended-modal fade no-display">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title" style="color:red">Edit Product</h4>
</div>
<div class="modal-body">
<div class="row">
<form action="<?php echo base_url() ?>admin/editProduct" enctype="multipart/form-data" method="post" autocomplete="off">
<div class="col-md-6">
<h4><b>Category Name <span class="symbol required"></span></b></h4>
<p>
<select class="form-control" name="cat_id" required>
<option value="">---- Select Category ----</option>
<?php
foreach($cat['list'] as $rows=>$value){ ?>
<option value="<?php echo $cat['list'][$rows]->cat_id; ?>"<?php if($cat['list'][$rows]->cat_id == $product['list'][$row]->cat_id) echo "selected=selected"; ?>><?php echo ucwords($cat['list'][$rows]->cat_name); ?></option>
<?php } ?>
</select>
</p>
</div>
<div class="col-md-6">
<input type="hidden" name="item_id" value="<?php echo $product['list'][$row]->item_id;?>">
<input type="hidden" name="image_name" value="<?php echo $product['list'][$row]->image;?>">
<h4><b>Product Name <span class="symbol required"></span></b></h4>
<p>
<input class="form-control" type="text" name="item_name" value="<?php echo $product['list'][$row]->item_name;?>" required>
</p>
</div>
<div class="col-md-6">
<h4><b>Small Description <span class="symbol required"></span></b></h4>
<p>
<input class="form-control" type="text" name="small_desc" value="<?php echo $product['list'][$row]->small_desc;?>">
</p>
</div>
<div class="col-md-6">
<h4><b>Quantity<span class="symbol required"></span></b></h4>
<p>
<input class="form-control" type="number" name="quantity" value="<?php echo $product['list'][$row]->quantity;?>" min="1" required>
</p>
</div>
<div class="col-md-6">
<h4><b>Customer Price<span class="symbol required"></span></b></h4>
<p>
<input class="form-control" type="text" name="price" value="<?php echo $product['list'][$row]->price;?>" min="1" required>
</p>
</div>
<div class="col-md-6">
<h4><b>Reseller Price<span class="symbol required"></span></b></h4>
<p>
<input class="form-control" type="text" name="reseller" value="<?php echo $product['list'][$row]->reseller;?>" min="1" required>
</p>
</div>
<div class="col-md-6">
<h4><b>Color<span class="symbol"></span></b></h4>
<p>
<input class="form-control" type="text" name="color" value="<?php echo $product['list'][$row]->color;?>">
</p>
</div>
<div class="col-md-6">
<h4><b>Availability <span class="symbol required"></span></b></h4>
<select class="form-control" name="availability">
<?php if($product['list'][$row]->availability==1){;?>
<option value="1" selected>Available</option>
<option value="0">Not Available</option>
<?php } else {?>
<option value="1">Available</option>
<option value="0" selected>Not Available</option>
<?php }?>
</select>
</div>
<div class="col-md-6">
<h4><b>Status <span class="symbol required"></span></b></h4>
<select class="form-control" name="status">
<?php if($product['list'][$row]->status==0){;?>
<option value="0" selected>Inactive</option>
<option value="1">Active</option>
<?php } else {?>
<option value="0">Inactive</option>
<option value="1" selected>Active</option>
<?php }?>
</select>
</div>
<div class="col-md-6">
<h4><b>Image <span class=""></span>
</b></h4>
<input class="form-control" type="file" name="userfile">
<img src="<?php echo base_url()." assets/uploads/ ".$product['list'][$row]->image;?>" height="50px" width="50px" border="1px solid #FFF">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-light-grey">
Close
</button>
<button type="submit" class="btn btn-blue">
Update
</button>
</div>
</form>
</div>
</div>
</div>
With dynamic id, the modal will open with light black overlay on it. I can't edit the fields. Nothing is working inside the modal.
I am Not Understanding What is the problem with dynamic modal.
If Anyone knows Please reply.

Answer 1

You can try two things. 1. Move your form tag out and place it like this -
<form action="./admin/editProduct" enctype="multipart/form-data" method="post" autocomplete="off">
<div class="modal-body">
Give your modal z-index of 999 or so using css like this -
<style>
.modal {
z-index: 999;
}
</style>