javascript - 我对滚动模式 javascript 中加载的图像有疑问

Question

当我在我的网站中打开模态时，整个模态在我放入的两个选项卡中滚动时卡住其自身的底部。我曾尝试使用“溢出:隐藏”禁用主体滚动，但它不起作用。如果我调整窗口大小，卡住消失，但当我滚动模式时，问题再次出现。

我使用 jquery/ajax 脚本动态加载图像。这可能是问题所在吗？模态 javascript 和我的 jquery 之间有冲突吗？

In this extract of the Form tag I call the modal, moving the modal div outside the form when called, because it would'n work and I have the image form input inside the modal. When i close the modal, it moves inside the form again

 <div class="form-group" id="ProgramImage">
      <label class="col-sm-3 control-label">Main Image</label>
        <?php echo $this->element('common/tooltip',array('message' => 'We need to put in file sizes and image sizes here','title' => 'Image Upload')); ?>
          <div class="col-sm-8">
            <a href="javascript:;" onclick="put_out();jQuery('#modal-1').modal('show');">
              <?php 
                                    if(file_exists('./img/'.$this->request->data['Program']['image_url']) && !empty($this->request->data['Program']['image_url'] ) ) {
                                        echo $this->Html->image( $this->request->data['Program']['image_url'].'?'.$timestamp,array('id' => 'image_url_preview','style'=>'max-height: 200px') );
                                    } else {
                                        echo $this->Html->image('placehold_640x300.gif',array('id' => 'image_url_preview','style'=>'max-height: 200px') );
                                    }
              ?>
            </a>
            <br /><br />
            <a href="javascript:;" onclick="put_out();jQuery('#modal-1').modal('show');" class="btn btn-blue">Choose</a>
          </div>
    </div>

Here is the modal code

<style type="text/css">
    .img_selected{
        border:5px solid #bbb;
        margin-bottom: 22px;
    }
</style>
<div class="modal fade" id="modal-1">
    <div class="modal-dialog" style="width: 70%;">
        <div class="modal-content">
            <div class="col-md-12">
                <br/>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h2>Upload image</h2>
                            <span></span>
                        </div>              
                        <div class="panel-options">     

                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row ">  
                            <ul class="nav nav-tabs" id="tabs">             
                                <li class="active">
                                    <a href="#upload" onclick='upload();' data-toggle="tab">
                                        <span class="hidden-xs" >Upload new image</span>
                                    </a>
                                </li>
                                    <li>
                                    <a href="#library" onclick='library();' data-toggle="tab">
                                        <span class="hidden-xs">Choose from library</span>
                                    </a>
                                </li>               
                            </ul>
                        </div>
                    </div>
                    <div class="panel-body" style="max-height: 50vh;overflow:scroll;">
                        <div class="form-group">                        
                            <div class="col-sm-12">
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade in active" id="upload">
                                                <div class="fileinput fileinput-new" data-provides="fileinput" id="newselectiondiv">
                                                    <div>
                                                        <span class="btn btn-blue btn-file btn-lg">
                                                             <!-- <input type="file" name="data[Facility][image_url]" accept="image/*">  -->
                                                            <?php echo $this->Form->input('image_url',array('class' => 'target', 'accept' => 'image/*','type' => 'file','div' => false));?>Upload</span>

                                                        <?php
                                                            // if(file_exists('./img/'.$this->request->data['Program']['image_url']) && !empty($this->request->data['Program']['image_url'])) {
                                                            //  echo '<a class="btn btn-orange" id="button-crop" onclick="crop_image()">Crop</a>';
                                                            //  //echo $this->Form->hidden('ex_image_url', array('value' => './img/'.$this->request->data['Program']['image_url']));
                                                            //  echo $this->Form->input('ex_image_url',array('type' => 'hidden', 'id' => 'ex_image_url', 'value' => './img/'.$this->request->data['Program']['image_url'] ));
                                                            // }
                                                        ?>  
                                                        <a class="btn btn-orange fileinput-exists" id="button-removeImage" data-dismiss="fileinput">Remove</a>
                                                        <?php //if(!isset($this->request->data['Program']['image_url']) && empty($this->request->data['Program']['image_url'])) { 
                                                            //echo '<a class="btn btn-orange fileinput-exists" id="button-crop" onclick="crop_image()">Crop</a>'; } ?>
                                                        <a class="btn btn-orange" id="button-saveImage" style="display: none" onclick="save_image()">Save Image</a>
                                                        <span id="crop_confirm" style="display:none">&nbsp;Image crop saved!</span>

                                                    </div>

                                                    <div class="fileinput-new thumbnail" style="width: 100%; height: 50%" data-trigger="fileinput" id="fileinput-new">

                                                        <?php 
                                                            if(file_exists('./img/'.$this->request->data['Program']['image_url']) && !empty($this->request->data['Program']['image_url'])) {
                                                                echo $this->Html->image( $this->request->data['Program']['image_url'].'?'.$timestamp);
                                                            } else {
                                                                echo $this->Html->image('placehold_640x300.gif');
                                                            }
                                                        ?>

                                                    </div>
                                                    <div id="cropImageContainer">
                                                        <span style="font-size: 15px">Drag the cursor on the image to crop it:</span>
                                                        <?php 
                                                            echo $this->Html->image( $this->request->data['Program']['image_url'].'?'.$timestamp, array('id' => 'croppedImage'));
                                                            echo $this->Form->input('crop_x',array('type' => 'hidden', 'id' => 'crop_x'));
                                                            echo $this->Form->input('crop_y',array('type' => 'hidden', 'id' => 'crop_y'));
                                                            echo $this->Form->input('crop_w',array('type' => 'hidden', 'id' => 'crop_w'));
                                                            echo $this->Form->input('crop_h',array('type' => 'hidden', 'id' => 'crop_h'));
                                                            echo $this->Form->input('crop_saved',array('type' => 'hidden', 'id' => 'crop_saved'));
                                                        ?>
                                                    </div>

                                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 1280px; max-height: 600px" id="fileinput-exists"></div>

                                                </div>
                                    </div>                  
                                    <div role="tabpanel" class="tab-pane fade" id="library">
                                        <?php echo $this->Form->hidden('image_library',array('class' => 'target','type' => 'text','value' => ''));?>
                                        <div class="gallery-env" id='library_list'>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Load photo</h4>
            </div>

            <div class="modal-body">
                    <div class="form-group">                        
                        <div class="col-sm-12">
                            <?php 
                                        // if(file_exists('./img/'.$this->request->data['Program']['image_url']) && !empty($this->request->data['Program']['image_url'])) {
                                        //  echo $this->Html->image( $this->request->data['Program']['image_url'].'?'.$timestamp, array('style' => "width: 100px;"  ) );
                                        // } else {
                                        //  echo $this->Html->image('placehold_640x300.gif', array('style' => "width: 100px;"  ) );
                                        // }
                            ?>

                        </div>
                    </div>  
            </div> -->

            <div class="modal-footer">
                <button type="button" class="btn btn-red btn-lg" onclick="put_in();delete_choose();"data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-blue btn-lg" onclick="put_in();preview();" data-dismiss="modal">Confirm</button>
            </div>

        </div>
    </div>
</div>

Finally, the JS code I call to move my modal, load the images (with ajax), select image, etc.

$('#tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

function preview(){
    if ($("input[name='data[Program][image_library]']").val() == '')
        var url = $("[id='croppedImagePre']").attr('src');
    else
        var url = '../../'+$("input[name='data[Program][image_library]']").val();
    $("[id='image_url_preview']").attr('src',url);
}

function upload(){
    $("input[name='data[Program][image_library]']").val('');
}

function library(){
    $result = [];
         $.ajax({
                  url : '../images_ajax',
                  type: 'POST',
                  async: false, 
                  //data: {branch_id:branch_id,namespace:namespace},    img-thumbnail
                  success : function(response){
                    //console.log(response);
                    result = response;
                  } 
            });
    var full_obj = JSON.parse(result);
    var directory = full_obj.directory;
    var url = full_obj.url;
    var size = full_obj.size;
    var html = '';
    for(var i = 0; i < size; i++){
        html +='<div class="col-sm-2 col-xs-4" data-tag="1d"><article class="image-thumb "><a href="javascript:;" onclick="select_this(\'image_'+i+'\',\''+size+'\',\''+directory+url[i]+'\')" class="image"><img id="image_'+i+'" src="../../'+directory+url[i]+'"></a></article></div>';  
    }

    $("#library_list").html(html);

}

function select_this(id,size,url){
    for (var i = 0; i < size; i++) {
        if ( ('image_'+i == id) && !($("#image_"+i).hasClass('img_selected')) ){
            $("#image_"+i).addClass('img_selected');
            $("input[name='data[Program][image_library]']").val(url);
        }else
            if( ('image_'+i != id) && $("#image_"+i).hasClass('img_selected') )
                $("#image_"+i).removeClass('img_selected');
    };
}

function delete_choose(){
    upload();
    $("input[name='data[Program][image_url]']").val('') ;
}

function put_in(){
    $("#modal-1").appendTo("#ProgramImage");
}

function put_out(){
    $("#modal-1").prependTo("body");
}

Answer 1

我刚刚发现这是一个 Z-INDEX 问题:我将它设置为 10000，我的模态工作正常!