如何在iPhone上进行动态引导模态工作？

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"> &times; </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"> &times; </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"> 

2. Give your modal z-index of 999 or so using css like this -

     <style> .modal { z-index: 999; } </style>