Bootstrap模式弹出不适用于IE和Mozilla

时间:2017-04-22 12:02:27

标签: javascript jquery twitter-bootstrap bootstrap-modal

所有看起来都很完美并且使用chrome工作但是一旦我在safari,mozilla和IE中打开,没有任何事情发生。

以下是代码:



<!-- MAIN CONTENT - CATEGORIES -->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="home_cats">
        <div class="clearfix">
          <div class="row">
            <?$i=0; foreach($categs as $c):?>
              <?if($c['id_category_parent'] == 1 AND $c['id_category'] != 1 AND ! in_array($c['id_category'], $hide_categories)):?>
                <div class="col-xs-12 col-sm-4 col-md-4">
                  <div class="panel panel-home-categories">
                    <div class="panel-heading">
                      <a title="<?=HTML::chars($c['name'])?>" href="<?=Route::url('list', array('category'=>$c['seoname'], 'location'=>$user_location ? $user_location->seoname : NULL))?>">
                        <?$icon_src = new Model_Category($c['id_category']); $icon_src = $icon_src->get_icon(); if(( $icon_src )!==FALSE ):?>
                          <img src="<?=Core::imagefly($icon_src,30,20)?>" alt="<?=HTML::chars($c['name'])?>">
                          <?endif?>
                            <?=mb_strtoupper($c['name']);?>
                              <?if (Theme::get('category_badge')!=1) : ?>
                                (
                                <?=number_format($c['count'])?>)
                                  <?endif?>
                      </a>
                    </div>
                    <div class="panel-body">
                      <ul class="list-group">
                        <?$ci=0; foreach($categs as $chi):?>
                          <?if($chi['id_category_parent'] == $c['id_category'] AND ! in_array($chi['id_category'], $hide_categories)):?>
                            <?if ($ci < 3):?>
                              <li class="list-group-item">
                                <a title="<?=HTML::chars($chi['name'])?>" href="<?=Route::url('list', array('category'=>$chi['seoname'], 'location'=>$user_location ? $user_location->seoname : NULL))?>">
                                  <?if (Theme::get('category_badge')!=1) : ?>
                                    <span class="pull-right badge badge-success"><?=number_format($chi['count'])?></span>
                                    <?endif?>
                                      <?=$chi['name'];?>
                                </a>
                              </li>
                              <?endif?>
                                <?$ci++; if($ci == 3):?>
                                  <li class="list-group-item">
                                    <a role="button" class="show-all-categories" data-cat-id="<?=$c['id_category']?>">
                                      <?=__("See all categories")?> <span class="glyphicon glyphicon-chevron-right pull-right"></span>
                                    </a>
                                  </li>
                                  <?endif?>
                                    <?endif?>
                                      <?endforeach?>
                      </ul>
                    </div>
                  </div>
                </div>
                <? $i++; if ($i%3 == 0) echo '<div class="clear"></div>';?>
                  <?endif?>
                    <?endforeach?>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="modalAllCategories" class="modal fade" tabindex="-1" data-apiurl="<?=Route::url('api', array('version'=>'v1', 'format'=>'json', 'controller'=>'categories'))?>">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <ul class="list-group">
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- // MAIN CONTENT - CATEGORIES -->
&#13;
&#13;
&#13;

我想在单击按钮时将listview插入弹出窗口。同样的例子。 这是例子:

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" ">


<div class="body-content">
<div align="center">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

</div>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
       <div class="modal-header sub-modal">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
    
            <div class="modal-body">
               <ul class="list-group">
                <li class="list-group-item"><a href="#"> Here where i want the list view 1</a></li>
                <li class="list-group-item"><a href="#"> Here where i want the list view 2</a></li>
                <li class="list-group-item"><a href="#"> Here where i want the list view 3</a></li>
                <li class="list-group-item"><a href="#"> Here where i want the list view 4</a></li>
              </ul>
            </div>
     
    </div>
  </div>
</div>
</div>

<style>
.body-content{padding-top:100px;}
.sub-modal{background:#4285f4;}
li {list-style-type: none;}
.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
}
li:hover{background:#4285f4;}
a:focus, a:hover {
    color: #fff;
    text-decoration: none;
}

</style>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

删除链接标记中的额外引号(“)。我希望它有效。

答案 1 :(得分:0)

经过近24小时的处理这个问题!我终于找到了解决方案我忘了我在我的网站上使用(https)。现在我把它解决了htaccess。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>