Not running a modal window when using the fullPage plugin?

Good day! Typeset leding using the fullpage plugin. in the layout there is a block where clicking on the picture appears a modal window.
On the big screen modal window appears. but on a small(1366*768px) no. At random it turned out that when you add the element effect the properties of height and width of the modal window does not work.(does not open).Do not tell me why could it be?
here is the markup itself
<div class="effect is-animated" data-toggle="modal" data-target="#Modal-2">
 <a href="#!" class="thumb-1"></a>
 <div class="caption">
the <h3>dddddd</h3>
 <p> dddddd</p></div>
</div>
 <div id="Modal-2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="ModalLabel-2" aria-hidden="true">
 <div class="modal-dialog" role="document">
 <div class="modal-content modal-lg">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
 <div class="modal-body">
 <!-- the main content (body) of a modal window -->
 <div class="container-fluid">
 <!-- The container in which you can create classes for the grid system -->
 <div class="row">
 <div class="col-md-6 form_content">
the <h3>ddddd</h3>

 <p>dddd.<span> ddddd</span></p>

 <form class="datacatch popup-form-zakaz">
 <div class="form-group ">
 <input type="text" name="email" placeholder="email Address" required="required">
</div>

 <div class="form-group ">
 <input class="button-isi form-control-2-button" type="submit" value="Try">
</div>
<span>ddddddd</span>
</form>
</div>
 <div class="col-md-6">ddddd</div>
</div>
</div>
</div>

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

styles for block effect
.effect{
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 100%;
 margin-right: 3px;
 margin-bottom: 3px;
 cursor: pointer;}

Connected files in the header
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 <link rel="stylesheet" type="text/css" href="fullpage/jquery.fullPage.css">
 <link rel="stylesheet" type="text/css" href="style.css">
 <!--[if IE]>
 <script type="text/javascript">
 var console = { log: function() {} };
</script>
<![endif]-->

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script type="text/javascript" src="fullpage/scrolloverflow.min.js"></script>

 <script type="text/javascript" src="fullpage/jquery.fullPage.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
July 8th 19 at 15:30
0 answer

Find more questions by tags JavaScriptCSSHTML