Тема: Почему не получается modal bootstrap?
Показать сообщение отдельно
  #1 (permalink)  
Старый 31.10.2017, 16:02
Интересующийся
Отправить личное сообщение для panikajo Посмотреть профиль Найти все сообщения от panikajo 		 
Регистрация: 27.10.2017
Сообщений: 24

Почему не получается modal bootstrap? 
<a href="/jqueryform-75cb32/form.html" data-toggle="modal" data-target="#theModal">Lab 6</a>
<div id="theModal" class="modal fade text-center">
    <div class="modal-dialog">
      <div class="modal-content">
      </div>
    </div>
  </div>


<script>
	$('#modal_dota2').on('shown.bs.modal',function(){ //correct here use 'shown.bs.modal' event which comes in bootstrap3
   $(this).find('iframe').attr('src','/jqueryform-75cb32/form.html');
})
</script>


Сама form.html
<!--
Copyright 2017 JQueryForm.com
License: http://www.jqueryform.com/license.php

FormID: jqueryform-75cb32
Date: 2017-10-30 04:53:14
Generated by http://www.jqueryform.com
-->
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="generator" content="jqueryform.com">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

  <title> :: Generated By JQueryForm.Com</title>
  

  <!-- Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.min.css" rel="stylesheet">
  

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <link href="vendor.css" rel="stylesheet">

<style type="text/css">
body{
  background-color: transparent;
}

.jf-form{
  margin-top: 28px;
}

.jf-form > form{
  margin-bottom: 32px;
}

.jf-option-box{
  display: none;
  margin-left: 8px;
}

.jf-hide{
  display: none;
}

.jf-disabled {
    background-color: #eeeeee;
    opacity: 0.6;
    pointer-events: none;
}

/* 
overwrite bootstrap default margin-left, because the <label> doesn't contain the <input> element.
*/
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: 0px;
}

div.form-group{
  padding: 8px 8px 4px 8px;
}

.mainDescription{
  margin-bottom: 10px;
}

p.description{
  margin:0px;
}

.responsive img{
  width: 100%;
}

p.error, p.validation-error{
  padding: 5px;
}

p.error{
  margin-top: 10px;
  color:#a94442;
}

p.server-error{
  font-weight: bold;
}

div.thumbnail{
  position: relative;
  text-align: center;
}

div.thumbnail.selected p{
  color: #ffffff;
}

div.thumbnail .glyphicon-ok-circle{
  position: absolute;
  top: 16px;
  left: 16px;
  color: #ffffff;
  font-size: 32px;
}

.jf-copyright{color: #888888; display: inline-block; margin: 16px;display:none;}

.form-group.required .control-label:after {
    color: #dd0000;
    content: "*";
    margin-left: 6px;
}

.submit .btn.disabled, .submit .btn[disabled]{
  background: transparent;
  opacity: 0.75;
}

/* for image option with span text */
.checkbox label > span, .radio label > span{
  display: block;
}

.form-group.inline .control-label,
.form-group.col-1 .control-label,
.form-group.col-2 .control-label,
.form-group.col-3 .control-label
{
  display: block;
}

.form-group.inline div.radio,
.form-group.inline div.checkbox{
  display: inline-block;
}

.form-group.col-1 div.radio,
.form-group.col-1 div.checkbox{
  display: block;
}

.form-group.col-2 div.radio,
.form-group.col-2 div.checkbox{
  display: inline-flex;
  width: 48%;
}

.form-group.col-3 div.radio,
.form-group.col-3 div.checkbox{
  display: inline-flex;
  width: 30%;
}

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

</style>


</head>

<body>


<!-- ----------------------------------------------- -->
<div class="container jf-form">
<form data-licenseKey="" name="jqueryform-75cb32" id="jqueryform-75cb32" action='admin.php' method='post' enctype='multipart/form-data' novalidate autocomplete="on">
<input type="hidden" name="method" value="validateForm">
<input type="hidden" id="serverValidationFields" name="serverValidationFields" value="">



<div class="form-group f4 required" data-fid="f4">
  <label class="control-label" for="f4">Solo MMR</label>


<input type="text" class="form-control" id="f4" name="f4" value=""   placeholder="Solo MMR" 
    data-rule-required="true"  />


  
</div>




<div class="form-group f5 required" data-fid="f5">
  <label class="control-label" for="f5">Ваш возраст</label>


<input type="text" class="form-control" id="f5" name="f5" value=""   placeholder="Ваш возраст" 
    data-rule-required="true" data-msg-required="Обязательное поле"  />


  
</div>




<div class="form-group f6 required" data-fid="f6">
  <label class="control-label" for="f6">Чем вы занимаетесь</label>


<input type="text" class="form-control" id="f6" name="f6" value=""   placeholder="Чем вы занимаетесь" 
    data-rule-required="true" data-msg-required="Обязательное поле"  />


  
</div>




<div class="form-group f7 required" data-fid="f7">
  <label class="control-label" for="f7">Сколько часов в день играете</label>


<input type="text" class="form-control" id="f7" name="f7" value=""   placeholder="Сколько часов в день играете" 
    data-rule-required="true" data-msg-required="Обязательное поле"  />


  
</div>




<div class="form-group f8 required" data-fid="f8">
  <label class="control-label" for="f8">Почему хотите получить эту работу</label>


<input type="text" class="form-control" id="f8" name="f8" value=""   placeholder="Почему хотите получить эту работу" 
    data-rule-required="true" data-msg-required="Обязательное поле"  />


  
</div>




<div class="form-group f9 required" data-fid="f9">
  <label class="control-label" for="f9">Ссылка на скриншот с рейтингом из доты</label>


<input type="text" class="form-control" id="f9" name="f9" value=""   placeholder="Ссылка на скриншот с рейтингом из доты" 
    data-rule-required="true" data-msg-required="Обязательное поле"  />


  
</div>




<div class="form-group f10 required" data-fid="f10">
  <label class="control-label" for="f10">Ссылка на dotabuff</label>


<input type="text" class="form-control" id="f10" name="f10" value=""   placeholder="Ссылка на dotabuff" 
    data-rule-required="true" data-msg-required="Обязательное поле"  />


  
</div>




<div class="form-group f16 " data-fid="f16">
  <label class="control-label" for="f16">Ссылка на VK или Telegram или Skype</label>


<input type="text" class="form-control" id="f16" name="f16" value=""   placeholder="Ссылка на VK или Telegram или Skype"  />


  
</div>



<div class="form-group submit f0 " data-fid="f0" style="position: relative;">
  <label class="control-label sr-only" for="f0" style="display: block;">Submit Button</label>

  <div class="progress" style="display: none; z-index: -1; position: absolute;">
    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
    </div>
  </div>

  <button type="submit" class="btn btn-primary btn-lg" style="z-index: 1;">
  		Submit
  </button>

</div><div class="clearfix"></div>

<div class="submit">
  <p class="error bg-warning" style="display:none;">
    Please check the required fields.  </p>
</div>

<div class="clearfix"></div>


</form>

<a href="http://www.jqueryform.com" target="_blank" class="jf-copyright">Powered by jqueryform.com</a>
</div>

<div class="container jf-thankyou" style="display:none;" data-redirect="http%3A%2F%2Fboostgame.ru" data-seconds="10">
  <h3>Ожидайте ответа :)</h3>
</div>
<!-- ----------------------------------------------- -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>
<script src="vendor.js" ></script>

<script src="jqueryform.com.min.js?ver=v2.0.3&id=jqueryform-75cb32" ></script>




<script type="text/javascript">

	// start jqueryform initialization
	// --------------------------------
	JF.init('#jqueryform-75cb32');

</script>

  </body>
</html>



Вот что выходит
https://image.prntscr.com/image/u6mI...TAYzaosiSQ.png
Последний раз редактировалось panikajo, 31.10.2017 в 17:00.
Ответить с цитированием