Question

在iphone中打开bootstrap模式有问题。如果我使用下面的静态模态，

<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 -->

模态将正确打开，我可以输入值。

但如果使用模态进行编辑，如下所示

<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>

使用动态ID时，模态将以浅黑色覆盖打开。我无法编辑字段。莫代尔内部没有任何工作。我不明白动态模态有什么问题。如果有人知道请回复。

Answer 1

你可以尝试两件事。 1.将表单标签移出并按此放置 -

    <form action="./admin/editProduct" enctype="multipart/form-data" method="post" autocomplete="off">
  <div class="modal-body">

使用css这样的模态z-index为999左右 -

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

 </style>

如何在Iphone上进行动态bootstrap模式工作？

1 个答案: