<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
