bootstrap модальный охватывает содержание - PullRequest
Новая
       12

bootstrap модальный охватывает содержание

0 голосов
/ 07 апреля 2020

Я пытаюсь использовать модал на своей странице. Я скопировал исходный код веб-страницы Joomla и использую его в качестве шаблона, и я хочу использовать модал на странице. Однако, как я заметил, когда я помещаю контент в модальный div, он блокирует содержимое страницы, будучи скрытым. Невозможно щелкнуть любой кликабельный контент на странице, однако страницу можно просматривать правильно. И когда нет или меньше контента, можно использовать страницу. Я надеюсь, что смогу решить проблему. Любые идеи, как решить эту проблему?

bootstrap версия 2.3.2 заголовок страницы 

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="http://www.mywebpage.com/sertifikalar/sertifikalar.html" />
    <meta name="title" content="Sertifikalarımız" />
    <meta property="og:url" content="http://www.mywebpage.com/sertifikalar/sertifikalar.html" />
    <meta property="og:title" content="Sertifikalarımız" />
    <meta property="og:type" content="article" />
    <meta property="og:description" content=" " />
    <meta name="description" content=" " />
    <meta name="generator" content="MYOB" />
    <title>Sertifikalarımız</title>
    <link href="http://www.mywebpage.com/component/search/?Itemid=114&amp;format=opensearch" rel="search" title="Ara Erdem Tekstil" type="application/opensearchdescription+xml" />
    <link href="http://www.mywebpage.com/templates/erdem/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
    <link href="http://www.mywebpage.com/media/k2/assets/css/magnific-popup.css?v2.7.0" rel="stylesheet" type="text/css" />
    <link href="http://www.mywebpage.com/media/k2/assets/css/k2.fonts.css?v2.7.0" rel="stylesheet" type="text/css" />
    <link href="http://www.mywebpage.com/components/com_k2/css/k2.css?v2.7.0" rel="stylesheet" type="text/css" />
    <link href="http://www.mywebpage.com/media/mod_languages/css/template.css" rel="stylesheet" type="text/css" />
    <link href="http://www.mywebpage.com/media/jui/css/chosen.css" rel="stylesheet" type="text/css" />
    <script src="http://www.mywebpage.com/media/template/gzip.php?jquery.min-98686440.js" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/template/gzip.php?jquery-noconflict-b74a957e.js" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/template/gzip.php?jquery-migrate.min-5d9957cb.js" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/k2/assets/js/jquery.magnific-popup.min.js?v2.7.0" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/k2/assets/js/k2.frontend.js?v2.7.0&amp;sitepath=/" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/template/gzip.php?bootstrap.min-0fadd2ee.js" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/jui/js/chosen.jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function (){
            jQuery('.advancedSelect').chosen({"disable_search_threshold":10,"search_contains":true,"allow_single_deselect":true,"placeholder_text_multiple":"Type or select some options","placeholder_text_single":"Bir se\u00e7enek se\u00e7iniz","no_results_text":"Hi\u00e7bir sonu\u00e7 e\u015fle\u015fmedi"});
        });
    </script>
    <style type="text/css">.sige_cont_0 {width:205px;height:215px;float:left;display:inline-block;}
    </style>
    <link rel="stylesheet" href="http://www.mywebpage.com/plugins/content/sige/plugin_sige/sige.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://www.mywebpage.com/plugins/content/sige/plugin_sige/venobox/venobox.js"></script>
    <script type="text/javascript">jQuery(document).ready(function(){jQuery('.venobox').venobox();});</script>
    <link rel="stylesheet" href="http://www.mywebpage.com/plugins/content/sige/plugin_sige/venobox/venobox.css" type="text/css" media="screen"/>

    <link rel="apple-touch-icon-precomposed" href="http://www.mywebpage.com/templates/erdem/apple_touch_icon.png">
    <link rel="stylesheet" href="http://www.mywebpage.com/media/template/gzip.php?bootstrap-860ec88d.css">
    <link rel="stylesheet" href="http://www.mywebpage.com/media/template/gzip.php?theme-c590bafc.css">
    <script src="http://www.mywebpage.com/media/template/gzip.php?theme-d71f4fad.js"></script>
</head>

my modal link :

<a  href="#" data-toggle="modal" data-target="#exampleModal"><img src="some_image.jpg"></a>

and my modal div:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-3">
                    <img src="http://www.mywebpage.com/images/some_other_image.jpg" />
                </div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 08 апреля 2020

Я нашел решение: joomla bootstrap. css .modal не имеет дисплея: нет; Я только добавил дисплей: нет; тогда проблема решена

...