Light Slider is not working in bootstrap modal when i pressed f12 key for inspect element then light slider is working see the link in below comment and anyone help me please
I hope this code will help you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>lightSlider Demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<link rel="stylesheet" href="../src/css/lightslider.css"/>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
ul{
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.demo .item{
margin-bottom: 60px;
}
.content-slider li{
background-color: #ed3020;
text-align: center;
color: #FFF;
}
.content-slider h3 {
margin: 0;
padding: 70px 0;
}
.demo{
width: 800px;
}
</style>
<script src="../src/js/lightslider.js"></script>
<script>
$(document).ready(function() {
var count = 0
$('#myModal').on('shown.bs.modal', function () {
if (count === 1) return;
$('#image-gallery').addClass('cS-hidden');
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
count++;
});
});
</script>
</head>
<body>
<button type="button" class="btn btn-info btn-lg myModal" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="demo">
<div class="item">
<div class="clearfix" style="max-width:474px;">
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
<li data-thumb="img/thumb/cS-3.jpg">
<img src="img/cS-3.jpg" />
</li>
<li data-thumb="img/thumb/cS-4.jpg">
<img src="img/cS-4.jpg" />
</li>
<li data-thumb="img/thumb/cS-5.jpg">
<img src="img/cS-5.jpg" />
</li>
<li data-thumb="img/thumb/cS-6.jpg">
<img src="img/cS-6.jpg" />
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
This is known issue of lightslider on modal.
You check this issue on github and it's still unsolved maybe you have to look for other option. For that purpose you can use lightbox, magnific popup or owl-carousel to achieve same functionality.
Ran into the same problem, the slider thinks the modal size is 0 when collapsed, so it sets the height and width to zero.
So after the model is open, you should resize the slider(or window) to take into account the new modal window size.
In my case, I added the onclick="refresh_slider();" function to the activation button:
<!-- Button trigger modal -->
<button onclick="refresh_slider();" type="button" class="btn btn-secondary animate-up-2" data-bs-toggle="modal" data-bs-target="#exampleModal">Open
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">label</h5>
<button type="button" class="close btn" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- slider -->
</div>
<div class="modal-footer">
<button type="button" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then a script that resizes the window on that function:
function refresh_slider(){
$(window).resize();
}
Related
I have a web app running locally and I will like to get a particular div from this url using jquery without loading the complete page. There is a section which contains a button for opening a modal dialog. I went through some few examples I found here but could not solve my problem. below is the page
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/modal.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$.post("https://localhost:44330/",{},function(response){
$(response).find('testblock').each(function(){
$('#main').append($(this).html());
});
});
});
</script>
</head>
<body>
<div class="text-center">
<h1 class="display-4">Hello from sub application 2</h1>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog modal-lg" style="height: 100%; width: 100%">
<!-- Modal content-->
<div class="modal-content" style="height: 90%; width: 100%">
<div class="modal-body" id="main">
#*<iframe src="https://localhost:44330/" width="1200" height="700" style="overflow: hidden; height: 90%; width: 100%; border: 1px solid red;" scrolling="yes"></iframe>*#
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="js/modalClick.js"></script>
</body>
</html>
And the url has the following structure
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id ="testblock">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal5">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal5" role="dialog">
<div class="modal-dialog modal-lg" style="height: 100%">
<!-- Modal content-->
<div class="modal-content" style="height: 90%">
<div class="modal-body" style="height: 90%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="myBtn5">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried this example but doesn't work
You forgot to add the #. You defined testblock as ID. <div id="testblock"> ...
$(response).find('#testblock') ...
I was able to do this after going through the documentation with a slight adjustment.
<script>
function ready() {
$("#main").load("https://localhost:44330/ #testblock",
function (response)
{
});
}
$(document).ready(ready);
</script>
I'm trying to trigger a link click when the user reaches the bottom of the page yet not successful. when the users reach the bottom, an alert gets successfully fired however trigger to click the signup link doesn't get fired. What am I missing?
var num = 0 ;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height() && num ==0)
{alert("bottom reached!");
num = 1
$('#signupbtn a').trigger('click');
}
});
#bottom{
position: absolute;
top: 1000px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<a class="button button-sm button-shadow" id="signupbtn" data-toggle="modal" data-target=".bs-example-modal-new" href="#">Sign Up</a>
<div class="wrap">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="body-message">
<input placeholder="Email" style="width: 258px; height: 48px; margin: 100"><a class="button button-secondary button-shadow" href="#">send me </a>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
<div id="bottom">Bottom</div>
I have also tried this $('#signupbtn').trigger('click'); yet didnt work
To open the modal, use the native code from Bootstrap 3 documentation
$('.modal').modal('show');
var num = 0;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height() && num == 0)
{
alert("bottom reached!");
num = 1
$('.modal').modal('show');
}
});
#bottom {
position: absolute;
top: 1000px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<a class="button button-sm button-shadow" id="signupbtn" data-toggle="modal" data-target=".bs-example-modal-new" href="#">Sign Up</a>
<div class="wrap">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="body-message">
<input placeholder="Email" style="width: 258px; height: 48px; margin: 100"><a class="button button-secondary button-shadow" href="#">send me </a>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
<div id="bottom">Bottom</div>
You're using the wrong condition to detect if scroll reached the bottom page. You can use:
$(window).scrollTop() + $(window).height() > $(document).height() - 1 && num == 0 or the following answer. Note that I add -1 since the linked answer wasn't working for me in 1920x1080.
For click trigger #signupbtn would work fine.
var num = 0;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && num == 0)
{
alert("bottom reached!");
num = 1
$('#signupbtn').trigger('click');
}
});
#bottom{
position: absolute;
top: 1000px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<a class="button button-sm button-shadow" id="signupbtn" data-toggle="modal" data-target=".bs-example-modal-new" href="#">Sign Up</a>
<div class="wrap">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="body-message">
<input placeholder="Email" style="width: 258px; height: 48px; margin: 100"><a class="button button-secondary button-shadow" href="#">send me </a>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
<div id="bottom">Bottom</div>
Just try
$('#signupbtn').trigger('click');
Or
$('#signupbtn').click();
The modal is defined as:
<div class="moremodal" style="display:none;">
<div class="modal-dialog modal-lg" style="width: 500px; border: outset; position: fixed; top: 25%; left: 35%;">
<div class="modal-content" style="top:0px;"></div>
</div>
Whenever someone clicks outside the modal, I have disabled the clicks so that the person is forced to choose any options from the modal before proceeding. (This does not work properly for some reason.)
$("*:not('.moremodal')").on("click",function(){
return false;
})
But i want to re-enable clicks on the page after the modal is closed. How do I do that? And where should I call that function or write that code?
EDIT:
There is only one modal which I populate.
Here two bootstrap modal.
1) Close when click on outside of modal.
2) Not close when click on outside of modal.
Hope it will help you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Default Modal</button>
<!-- Modal -->
<div id="myModal" 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>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1" data-backdrop="static" data-keyboard="false" >Disabled outside click modal</button>
<!-- Modal -->
<div id="myModal1" 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>
Use bootstrap modal and add this code you can entirely achieve your goal.
Hope this will helps you.
$(document).ready(function() {
$("#popup").modal({
show: false,
backdrop: 'static'
});
$("#click-me").click(function() {
$("#popup").modal("show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="modal" id="popup" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Title</h3>
</div>
<div class="modal-body">
**Your HTML goes here**
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<a id="click-me" class="btn btn-primary">Open</a>
</body>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>
Use CSS property "pointer-event: none;" on modal overlay.
Firstly change your selector into something like this (assign an id to the model for ease of selection):
$('body').click(function(evt){
//all elements except the modal and elements in the modal
if(evt.target.id == "modal_id" || $(evt.target).closest("#modal_id").length > 0) {
//if the modal is visible do nothing
if($("#modal_id").is(":visible")) {
return false;
}
}
});
EDIT
If you are dealing with multiple modals and need to use the class selector:
$('body').click(function(evt){
//all elements except the modal and elements in the modal
if($(evt.target).hasClass("moremodal") || $(evt.target).closest(".moremodal").length > 0) {
//if there is a visible model do nothing
if($(".moremodal").is(":visible")) {
return false;
}
}
});
Simply you can use this
<a data-controls-modal="id" data-backdrop="static" data-keyboard="false" href="#">
<head>
<style>
.modal-container {
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.8);
display: inline-block;
position: absolute;
top: 0;
left 0;
z-index: 100;
}
.modal-content {
margin: 10%;
backgrond-color: rgba(0,0,0,1);
display: inline-block;
width: 80%;
height: 80%;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div> my normal content </div>
<div>
<button type="button" id="open-modal">open the modal</button>
</div>
<div class="modal-container hidden">
<div class="modal-content">
Here is your modal content
<div>
<button type="button" id="close-modal">close</button>
</div>
<div>
</div>
<script src="path/to/jquery/libraries/jquery.min.js"></script>
<script>
$(document).ready(() => {
$('.modal-container').on('click', function(event){
// stop bubbling on clicks
event.preventDefault();
event.stopPropagination();
});
$('#open-modal').on('click', function(){
// show the modal
$('.modal-container').removeClass('hidden');
// disable body scrolling in the background
$('body').css('overflow-x', 'hidden').css('overflow-y', 'hidden');
})
$('#close-modal').on('click', function(event){
$('.modal-container').addClass('hidden');
$('body').css('overflow-x', 'auto').css('overflow-y', 'auto');
}
});
</script>
</body>
i think this logical code shows you how it can work. i've not tested it so i think the css part is not 100% correct.
Hello I am new to Wordpress,
I've got a button which is Quick Enquiry which is placed at the bottom of my post.
I want to open an iframe on that button's click.
I tried a plugin named iframe popup,
<button style="background-color: #232254; text-decoration: none; color: #ffffff; width: 200px; height: 50px; border-radius: 15px 15px 15px;" onclick="forIframe();">Quick Enquiry</button>
<script type="text/javascript">
function forIframe()
{[iframe-popup category="Category1"];}</script>
</div>
But nothing is working.
http://www.ithink.co/support_ticketing_system.html
Please visit this link, you will see a quick enquiry button. I want it exactly the same.
Thank you.
you can create popup by using bootstrap in wordpress
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Quick Enquiry</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Quick Enquiry</h4>
</div>
<div class="modal-body">
<p>[iframe-popup category="Category1"]</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>
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>