i am very much poor in css.in my project i need a popup window.thats why i search on net and found/known about bootstrap modal. and trying to work with it.but i am facing problem. there are a lots of problem in stackoverflow already.but i thing my problems is different.thats why i am asking again?
problem=>
look above the box is appearing.and gone again without my instruction/without dowing anything.
my html=>
<div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div>
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
and my css=>
<style type="text/css">
.center {
margin-top: 50px;
}
.modal-header {
padding-bottom: 5px;
}
.modal-footer {
padding: 0;
}
.modal-footer .btn-group button {
height: 40px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: none;
border-right: 1px solid #ddd;
}
.modal-footer .btn-group:last-child > button {
border-right: 0;
}
</style>
and my head section=>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/Content/img/tsms/financial-literacy.gif" sizes="32x32">
<title>
AdminTSMS
</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/select2.css" rel="stylesheet"/>
<link href="/Content/css/datepicker3.css" rel="stylesheet"/>
<link href="/Content/css/AdminLTE.css" rel="stylesheet"/>
<link href="/Content/bootstrap-dialog.css" rel="stylesheet"/>
<link href="/Content/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/css/icheck/blue.min.css" rel="stylesheet"/>
<link href="/Content/Custom_Admin.css" rel="stylesheet"/>
<link href="/Content/css/skins/skin-blue.css" rel="stylesheet"/>
<link href="/Content/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="/Content/js/plugins/jquery/jquery-2.2.4.js"></script>
<script src="/Content/js/plugins/bootstrap/bootstrap.js"></script>
<script src="/Content/js/plugins/fastclick/fastclick.js"></script>
<script src="/Content/js/plugins/slimscroll/jquery.slimscroll.js"></script>
<script src="/Content/js/plugins/select2/select2.full.js"></script>
<script src="/Content/js/plugins/moment/moment.js"></script>
<script src="/Content/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/Content/js/plugins/icheck/icheck.js"></script>
<script src="/Content/js/plugins/inputmask/jquery.inputmask.bundle.js"></script>
<script src="/Content/js/app.js"></script>
<script src="/Content/js/init.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/Custom_Login.js"></script>
<script src="/Scripts/MyCustomFile.js"></script>
<script src="/Content/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/datetimepicker/js/bootstrap-datetimepicker.fr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
i am working on a project thats why there are lots of unnecessary staff.for better understanding i am giving you my full project head section.because i think the head section/links is one of the reason for the problem.css/bootstrap expert ? please help me.
Please try this:
.center {
margin-top: 50px;
}
.modal-header {
padding-bottom: 5px;
}
.modal-footer {
padding: 0;
}
.modal-footer .btn-group button {
height: 40px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: none;
border-right: 1px solid #ddd;
}
.modal-footer .btn-group:last-child > button {
border-right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div>
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I have a fullscreen modal in my app with an search input. I would like to close this modal when I click outside anywhere other than the input or search button. I use Bootstrap.
How can I do this ?
I try different things and I
Thanks for help
#searchModal {
padding-top: 6rem;
background-color: rgba(179, 179, 179, 0.79);
}
.modal-fullscreen .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.bg-transparent {
--bs-bg-opacity: 1;
background-color: transparent !important;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btn btn-primary search" href="#" data-bs-toggle="modal" data-bs-target="#searchModal">
search
</a>
<div class="modal fade" id="searchModal" data-bs-backdrop="false">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content bg-transparent">
<div class="modal-body container-xxl">
<div class="row justify-content-center align-items-center">
<div class="col col-lg-8">
<form>
<div class="position-relative">
<input type="search" class="form-control fw-light" placeholder="Search…"/>
<button type="submit" class="btn btn-link">
SEARCH
</button>
</div>
</form>
</div>
<div class="col-auto">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">
CLOSE
</button>
</div>
</div>
</div>
</div>
</div>
</div>
After adding on the required attribute, my submit button does not have any response. When the textbox is empty after pressing the submit button, the validation occurs but the button does nothing and does not have any response. The submit button only works finely after when the required attribute is removed. The below shows my html form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Manage store</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/form.css" />
</head>
<body>
<form method="post" action="store.php" enctype="multipart/form-data">
<div id="addStoreModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Stores</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Store location</label>
<input type="text" name="storeloc" id="storeloc" class="form-control" required/>
</div>
<div class="form-group">
<label class="control-label">Status</label>
<select class="form-control" name="status">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="submit" name="addStore" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
<div id="deleteStoreModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Employee</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" name="deleteStore" class="btn btn-danger" value="Delete">
</div>
</div>
</div>
</div>
<div id="editStoreModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Stores</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Store location</label>
<input type="text" name="editstoreloc" class="form-control"/>
</div>
<div class="form-group">
<label class="control-label">Status</label>
<select class="form-control" name="editstatus">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="submit" name="editStore" class="btn btn-primary">Edit</button>
</div>
</div>
</div>
</div>
<div id="storeExistModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Store exist</h4>
</div>
<div class="modal-footer">
<button type="submit" name="existStore" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Currently a button opens a modal that includes a text box. I need have that text box pre-populated, so I have attempted to mess around with the modal with no luck.
I have tried the following and nothing appears to happen.
function testFunc(){
$('#contactUsDlg').modal('show');
$('#contactUsDlg').on('shown.bs.modal', function {
$('#message-text').text("test");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" name="btn-ask" id="nonconform-btn" data-form-action-url="${newMessageUrl}"
data-pns="<%=OrderStatusPortletConstants.MESSAGE_CENTER_PORTLET_NAMESPACE %>"
data-use-ajax="true"
class="btn btn-submit btn-ask contact-us-dlg"
data-hidden-fields="message-order-id,message-source-url"
data-message-order-id="${selectedOrder.id}" data-message-source-url="${sourceUrl}" >
Contact Us
</button>
This is a possible solution basen on your snippets (not complete, IMHO)
$(document).ready(function() {
$('#contactUsModal').on('show.bs.modal', function(e) {
var text = $(e.relatedTarget).data('default-text');
$(this).find('#message-text').text(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<button type="button" name="btn-ask" class="btn btn-submit btn-ask contact-us-dlg" data-form-action-url="${newMessageUrl}" data-pns="<%=OrderStatusPortletConstants.MESSAGE_CENTER_PORTLET_NAMESPACE %>" data-use-ajax="true" data-hidden-fields="message-order-id,message-source-url"
data-message-order-id="${selectedOrder.id}" data-message-source-url="${sourceUrl}" data-toggle="modal" data-target="#contactUsModal" data-default-text="Initial contact us textarea modal content">
Contact Us
</button>
<div class="modal fade" id="contactUsModal" tabindex="-1" role="dialog" aria-labelledby="contactUsModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
If you haven't already, you should look into using jQuery UI. Here you can use something like the following:
<script src='jquery-3.2.1.min.js'></script>
<script src='jquery-ui-1.12.1.custom/jquery-ui.js'></script>
<link href='jquery-ui-1.12.1.custom/jquery-ui.css' rel='stylesheet' type='text/css'></link>
<link href='jquery-ui-1.12.1.custom/jquery-ui.theme.css' rel='stylesheet' type='text/css'></link>
<input id='mybutton' type='button' value='click me' />
<div id='result'>
<p id='firstp'></p>
<p id='secondp'></p>
</div>
<script>
$(function() {
$('#result').dialog({
open: function(event, ui) {
$('#resultp').html('[this is my text]');
}
});
});
$('#mybutton').on('click', function(evt) {
$('#secondp').html('[this is my second text]');
});
</script>
Madal Body content appear at modal footer
I have faced one problem in which the content of modal body appear at modal footer
whatever i write within modal body it will float to the modal footer
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="dist/css/bootstrap-select.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row" id="aap_modals">
<div class="col-md-12" >
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" ><i class="fa fa-book" aria-hidden="true" > Select Question Heading</i></button>
</div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Select Question</h4>
</div>
<div class="modal-body">
<div class="col-xs-2">
<label for="ex1">col-xs-2 and this is the problem </label>
<input class="form-control" id="ex1" type="text">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You missed a row inside modal body, Replace that modal body with this snip,
<div class="modal-body">
<div class="row">
<div class="col-xs-2">
<label for="ex1">col-xs-2 and this is the problem </label>
<input class="form-control" id="ex1" type="text">
</div>
</div>
</div>
Ok, so I hate to be that guy who posts a homework question, but I have hit the end of my rope.
I need a modal to appeal whenever I click the button.
I've tried:
The data-* way of showing the modal (as seen in the code below)
Showing the modal thru a JS function using $(#mainModal).modal('show')
Commenting out the jQuery version so that it doesn't conflict with Bootstrap's jQuery.
Nothing on the internet seems to work. Would someone mind telling me how to get the modal to show?
Thank you much!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chatty</title>
<!-- Styles -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
background-color: #333333;
padding-top:50px;
}
h1 {
color: white;
}
body, h1 {
padding-bottom: 50px;
}
.button-spacing {
margin-bottom: 50px;
}
</style>
<script>
</script>
</head>
<body class="container">
<h1 class="text-center">Chatty App</h1>
<button type="button" class="btn btn-success btn-lg button-spacing col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" data-toggle="modal" data-target="#mainModal">Post New Tweet</button>
<!-- Modal -->
<div id="mainModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You aren't loading the Javascript file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- missing this line -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chatty</title>
<!-- Styles -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background-color: #333333;
padding-top:50px;
}
h1 {
color: white;
}
body, h1 {
padding-bottom: 50px;
}
.button-spacing {
margin-bottom: 50px;
}
</style>
<script>
</script>
</head>
<body class="container">
<h1 class="text-center">Chatty App</h1>
<button type="button" class="btn btn-success btn-lg button-spacing col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" data-toggle="modal" data-target="#mainModal">Post New Tweet</button>
<!-- Modal -->
<div id="mainModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>