Question

我有一个旋转木马，在盒子上显示我的帖子，任何一个盒子都包含帖子内容，每个盒子都有一个按钮，当点击按钮时，一个bootstrap模式打开并显示一个表单。问题是在owl carousel容器下模态打开，模态容器没有完全显示。每个项目的模态位置也是不同的。我想在屏幕中心和所有其他内容上显示模态窗口！我使用固定位置模态窗口和owl容器可见溢出但问题仍然存在。这是我为旋转木马上的每个项目使用的代码

＆＃13;

<?php

global $post, $prop_images;
$post_meta_data     = get_post_custom($post->ID);
$prop_images        = get_post_meta( get_the_ID(), 'fave_property_images', false );
$prop_address       = get_post_meta( get_the_ID(), 'fave_property_map_address', true );
$prop_featured      = get_post_meta( get_the_ID(), 'fave_featured', true );
$listing_agent      = houzez_get_property_agent( $post->ID );
$mob = houzez_get_property_agent_mob( $post->ID );
$disable_agent = houzez_option('disable_agent');
$disable_date = houzez_option('disable_date');
$infobox_trigger    = '';
?>
<div id="ID-<?php the_ID(); ?>" class="item-wrap">
    <div class="property-item item-grid">
        <div class="figure-block">
            <figure class="item-thumb">
                <?php get_template_part( 'template-parts/featured-property' ); ?>

                <div class="label-wrap label-right hide-on-list">
                    <?php get_template_part('template-parts/listing', 'status' ); ?>
                </div>

                <div class="price hide-on-list">
                    <?php echo houzez_listing_price_v1(); ?>
                </div>
                <a class="hover-effect" href="<?php the_permalink() ?>">
                    <?php
                    if( has_post_thumbnail( ) ) {
                        the_post_thumbnail( 'houzez-property-thumb-image' );
                    }else{
                        houzez_image_placeholder( 'houzez-property-thumb-image' );
                    }
                    ?>
                </a>
                <?php get_template_part( 'template-parts/share', 'favourite' ); ?>
            </figure>
        </div>
        <div class="item-body">

            <div class="body-left">
                <div class="info-row">

                    <?php
                    echo '<h3 class="property-title"><a href="'.esc_url( get_permalink() ).'">'. esc_attr( get_the_title() ). '</a></h3>';

                    if( !empty( $prop_address )) {
                        echo '<address class="property-address">'.esc_attr( $prop_address ).'</address>';
                    }
                    ?>
                </div>
                <div class="table-list full-width info-row">
                    <div class="cell">
                        <div class="info-row amenities">
                            <?php echo houzez_listing_meta_v1(); ?>
                            <p><?php echo houzez_taxonomy_simple('property_type'); ?></p>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="phone">
                            <a href="<?php echo esc_url( get_permalink() ); ?>" class="btn btn-primary"> <?php esc_html_e( 'Details', 'houzez' ); ?> <i class="fa fa-angle-right fa-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <?php if( $disable_agent != 0 || $disable_date != 0 ) { ?>
        <div class="item-foot date hide-on-list">
            <?php if( $disable_agent != 0 ) { ?>
                <div class="item-foot-left">
                    <?php if( !empty( $listing_agent ) ) { ?>
						<button type="button" class="btn-email" data-toggle="modal" data-target="#enquirypopup-<?php echo $post->ID;?>">Contact Form</button>
						<div class="modal fade" id="enquirypopup-<?php echo $post->ID;?>" tabindex="-1" role="dialog" aria-labelledby="enquirypopupLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
						<div class="modal-dialog">
							
							<!-- Modal content-->
							<div class="modal-content row">
								<div class="modal-header custom-modal-header">
									<button type="button" class="close" data-dismiss="modal">×</button>
									<h4 class="modal-title" style="float:right;padding:16px 24px 16px 0px">Contact</h4>
								</div>
								<div class="modal-body">
									<?php get_template_part( 'property-details/agent', 'form1' ); ?>
								</div>
								
							</div>
							
						</div>
					</div>
						<button onclick="getElementById('hidden-div<?php echo $post->ID;?>').style.display = 'inline-block'; this.style.display = 'none'" class="btn-telcss prop-user-agent">Call</button>
						<span id="hidden-div<?php echo $post->ID;?>" class="show-tel" style="display:none;"><?php echo $mob; ?></span>						
                    <?php } ?>
                </div>
            <?php } ?>

            <?php if( $disable_date != 0 ) { ?>
                <div class="item-foot-right">
                    <p class="prop-date"><i class="fa fa-calendar"></i><?php printf( __( '%s ago', 'houzez' ), human_time_diff( get_the_time( 'U' ), current_time( 'timestamp' ) ) ); ?></p>
                </div>
            <?php } ?>
        </div>
    <?php } ?>
</div>

＆＃13;

Answer 1

通过从猫头鹰中提取模式div并将其放在页脚节中解决的问题。

猫头鹰旋转木马上每个项目的Bootstrap模态

1 个答案: