I have a modal that will house an image gallery. When the first modal is opened, there are thumbnails, and when a thumbnail image is clicked, a secondary modal will open on top of the first modal, which will have the larger images in a carousel (of course whichever thumbnail is clicked, that corresponding large image will open in the second modal's carousel position).
Right now, when I click either thumbnail, the second modal opens up, but it shows both of the thumbnails, instead of the larger image of the corresponding thumbnail. Very weird, I seem to have it right by looking at the code, but not sure why it's not working.
Here is the HTML:
<!-- kitchens modal -->
<div class="modal kitchens-modal fade" id="kitchens-modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header">
<h1>KITCHENS</h1>
<h3>Your dream kitchen is so close...</h3>
</div>
<!-- end modal header -->
<!-- modal body -->
<div class="modal-body">
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-6">
<a href="#">
<img class="thumbnail img-responsive" src="./assets/img/kitchens/kitchen.jpg" alt="Kitchen" title="Kitchen">
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-6">
<a href="#">
<img class="thumbnail img-responsive" src="./assets/img/kitchens/kitchen1.jpg" alt="Kitchen two" title="Kitchen two">
</a>
</div>
</div>
</div>
<!-- end modal body -->
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!--end modal footer -->
</div>
</div>
</div>
<!-- end kitchens modal -->
<!-- inner kitchen gallery modal -->
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modalCarousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modaCarousel" data-slide="prev">
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<a class="carousel-control right" href="#modalCarousel" data-slide="next">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- end inner kitchen gallery modal -->
And the CSS:
.thumbnail {
height: 100px;
margin: 6px;
}
.thumbnail {
margin-bottom: 6px;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
margin-top: 10%;
width: 5%;
}
And lastly, the JS:
$('.row .thumbnail').on('load', function() {
}).each(function(i) {
if(this.complete) {
var item = $('<div class="item"></div>');
var itemDiv = $(this).parents('div');
var title = $(this).parent('a').attr("title");
item.attr("title", title);
$(itemDiv.html()).appendTo(item);
item.appendTo('.carousel-inner');
if (i === 0) { // set first item active
item.addClass('active');
}
}
});
/* activate the carousel */
$('#modalCarousel').carousel({interval: false});
/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
$('.modal-title').html($(this).find('.active').attr("title"));
});
/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
var idx = $(this).parents('div').index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
});
I got this from a modal gallery I found online, and modified it a bit, but it just won't work! When I open the modal, and click on the thumbnail, the second modal just has all the thumbnails there, instead of the one image.
You can try something like:
$('.kitchens-modal .thumbnail').each(function(i) {
var item = $('<div class="item"></div>');
var itemDiv = $(this).parents('div');
var title = $(this).parent('a').attr("title");
item.attr("title", title);
$(itemDiv.html()).appendTo(item);
item.appendTo('.carousel-inner');
if (i === 0) { // set first item active
item.addClass('active');
}
});
/* activate the carousel */
$('#modalCarousel').carousel({interval: false});
/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
$('.modal-title').html($(this).find('.active').attr("title"));
});
/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
var idx = $(this).parents('div').index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
});
.thumbnail {
height: 100px;
margin: 6px;
}
.thumbnail {
margin-bottom: 6px;
}
.carousel-control.left {
background-image: none;
position: absolute;
top: 50%;
left: 0;
width: 25px;
height: 100%;
transform: translateY(-50%);
}
.carousel-control.right {
background-image: none;
position: absolute;
top: 50%;
right: 0;
width: 25px;
height: 100%;
transform: translateY(-50%);
}
.item .thumbnail {
margin: 0 auto;
}
body {
margin: 20px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn btn-primary" data-target="#kitchens-modal" data-toggle="modal">Open Kitchen Modal</div>
<!-- kitchens modal -->
<div class="modal kitchens-modal fade" id="kitchens-modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header">
<h1>KITCHENS</h1>
<h3>Your dream kitchen is so close...</h3>
</div>
<!-- end modal header -->
<!-- modal body -->
<div class="modal-body">
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-6">
<a href="#">
<img class="thumbnail img-responsive" src="http://placehold.it/200x200" alt="Kitchen" title="Kitchen">
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-6">
<a href="#">
<img class="thumbnail img-responsive" src="http://placehold.it/300x300" alt="Kitchen two" title="Kitchen two">
</a>
</div>
</div>
</div>
<!-- end modal body -->
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!--end modal footer -->
</div>
</div>
</div>
<!-- end kitchens modal -->
<!-- inner kitchen gallery modal -->
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modalCarousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modalCarousel" data-slide="prev">
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<a class="carousel-control right" href="#modalCarousel" data-slide="next">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- end inner kitchen gallery modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Hope this helps!
Related
I am trying to get a PDF to show in a bootstrap modal. Although it is appearing and all the modal functionality is working the PDF displays to the right of the modal
I have tried increasing the modal width.
HTML:
<div class='col-3'>
<div class="container">
<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">Application_ccps.pdf</h4>
</div>
<div class="modal-body">
<object width=500 height=575 data="Application_ccps.pdf"></object>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="thepanel">
<div class="panel-heading" id="panelheading">Documents submitted: 5</div>
<div class="panel-body" id="panelbody">
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
</div>
</div>
</div>
</div>
CSS:
#thepanel {
width: 300px;
height: 100%;
max-height: 500px;
line-height: 30px;
font-family: Segoe UI;
}
.pdfbutton {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.modal-body {
text-align: center;
}
The expected result is for when the PDF names are clicked a PDF pops up contained within the modal however this does not seem to be the case.
You can simply use iframe instead of the object tag.
<iframe width=500 height=575 src="path_to_your_pdf.pdf"></iframe>
you could create an individual modal for each file, and set different ids for each so you can call them on your buttons
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal01">Application_ccps.pdf</button><br>
<div class='col-3'>
<div class="container">
<div class="modal fade" id="myModal01" role="dialog">
...
</div>
</div>
</div>
I am making a lightbox - carousel - modal page with Bootstrap 3. So far, all is going very well, except for one thing:
When the carousel starts, it always starts at the very first image of the page, not the image that I click on.
In other words: if I click on image 1 then image 1 is opened, if I click on image 2, then image 1 is opened, if I click on image 3, then image 1 is opened.
After that, the carousel works like it should, but what I want is, that when I click on image 2, that image 2opens, and if I click on image 3, that image 3 opens.
Some code:
<ul class="cropped-images">
<li class="la active"><a data-content="No 1" href="#lightbox" data-toggle="modal" data-slide-to="0"><img src="images/thumbs/1.jpg" alt="No 1"></a></li>
<li class="la"><a data-content="No 2" href="#lightbox" data-toggle="modal" data-slide-to="1"><img src="images/thumbs/2.jpg" alt="No 2"></a></li>
<li class="la"> etc... </ul>
<div id="lightbox" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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">TITLE</h4>
</div>
<div id="carousel-example-generic" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/large/1.jpg" alt="...">
<div class="carousel-caption">One Image</div>
</div>
<div class="item">
<img src="images/large/2.jpg" alt="...">
<div class="carousel-caption">Another Image</div>
</div>
... etc...
<!-- Controls -->
controls code
</div>
</div>
</div>
</div>
Any suggestions please?
You can use Bootstrap Carousel to create your own custom lightbox, something as shown that I've tried to show in the snippet below, please have a look:
$('.content-holder .thumbnail').each(function(i) {
var item = $('<div class="item"></div>');
var itemDiv = $(this).parents('div');
var title = $(this).parent('a').attr("title");
item.attr("title", title);
$(itemDiv.html()).appendTo(item);
item.appendTo('.carousel-inner');
if (i === 0) { // set first item active
item.addClass('active');
}
});
/* activate the carousel */
$('#modalCarousel').carousel({interval: false});
/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
$('.modal-title').html($(this).find('.active').attr("title"));
});
/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
var idx = $(this).parents('div').index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
});
.thumbnail {
height: 100px;
margin: 6px;
}
.thumbnail {
margin-bottom: 6px;
}
.carousel-control.left {
background-image: none;
position: absolute;
top: 50%;
left: 0;
width: 25px;
height: 100%;
transform: translateY(-50%);
}
.carousel-control.right {
background-image: none;
position: absolute;
top: 50%;
right: 0;
width: 25px;
height: 100%;
transform: translateY(-50%);
}
.item .thumbnail {
margin: 0 auto;
}
body {
margin: 20px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content-holder">
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-6">
<a href="#">
<img class="thumbnail img-responsive" src="http://placehold.it/200x200" alt="" title="">
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-6">
<a href="#">
<img class="thumbnail img-responsive" src="http://placehold.it/300x300" alt="" title="">
</a>
</div>
</div>
</div>
</div>
<!-- lightbox modal -->
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Lightbox</h3>
</div>
<div class="modal-body">
<div id="modalCarousel" class="carousel">
<div class="carousel-inner"></div>
<a class="carousel-control left" href="#modalCarousel" data-slide="prev">
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<a class="carousel-control right" href="#modalCarousel" data-slide="next">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- end lightbox modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Hope this helps!
Try to something like this.
Just replace below line in your html code
<div id="carousel-example-generic" class="carousel slide">
to
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
I have a bootstrap modal window on my site that I can't seem to get styled consistently.
This is what my first modal looks like (and how I want it styled):
This is the 2nd modal window and styling:
here is the css that styles the title and the close:
.modal-title {
margin: 10px !important;
}
.close {
opacity: 1 !important;
position: relative !important;
padding-right: 15px !important;
top: 7px !important;
left: 3px !important;
}
Here is a copy of the relevant html for the modal windows:
<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<h4 class="modal-title">They Live (1988)</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div classs="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<br>
<h4 class="modal-title">Send Me a Note</h4>
</div>
<div class="modal-body">
<form id="contact-send" method="post" action="">
...
</form>
</div>
</div>
</div>
</div>
The html to call the modals:
Movie
and
<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>
edit 1: There are no parent divs. I did as suggested and removed the !important elements. I do have a form on the 2nd modal window and an iframe in the first, maybe this has to do with margins being set by those rules...looking into that now. Anyway this is what it looks like right now for the form:
and:
Edit2:
Messing around with my code a bit more, I see that if I remove the modal-header class and put the elements into modal-content that it seems to work. I'll post a final edit if I figure out anything else.
It is a simple syntax error that you may have overlooked.
The .modal-header inside #contactUS is not working because the class attribute is written as classs. Simply remove the extra letter.
You have a <br> tag before the h4 which I assume you added as an attempt to solve the problem. It is not needed so you can remove it.
The correct code would be like this:
.modal-title {
margin: 10px !important;
}
.close {
opacity: 1 !important;
position: relative !important;
padding-right: 15px !important;
top: 7px !important;
left: 3px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Movie
<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>
<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<h4 class="modal-title">They Live (1988)</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<!-- was classs -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<!-- <br> -->
<h4 class="modal-title">Send Me a Note</h4>
</div>
<div class="modal-body">
<form id="contact-send" method="post" action="">
...
</form>
</div>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/j1sb9gz3/
i'm working on a leaflet map and i want to add a legend on it by using a modal to do that.
In my modal i want to use a :
<ul><li>
and each ligne of my ul can be an horizontal line with a text or an icon with a text.
exemple :
-----(red) : Polyline of users
-----(green) : Polyline of the race
(icon) : marker of users ....
I don't know how to draw a red line in html/css to do something like that.
I have tried the <hr> but it's always take all the line.
thanks for your help.
I include the code of my modal :
<div id="infoModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<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">Informations</h4>
</div>
<div class="modal-body">
<h2>Legende : </h2>
<ul class="list-group">
<li class="list-group-item">
<div class="col-md-4">
<hr width="25%" size="10">
</div>
<div class ="col-md-8">
TEST
</div>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Example (From Comment Section)
You could use flexbox and a pseudo-element.
.list-group-item {} .list-group-item div {
display: flex;
align-items: center;
}
.list-group-item div::before {
content: '';
flex: 1;
height: 5px;
background: red;
margin-right: 1em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal-body">
<h2>Legende : </h2>
<ul class="list-group">
<li class="list-group-item">
<div class="col-sm-12">
<img src="http://lorempixel.com/image_output/abstract-q-c-25-25-2.jpg" alt="">
</div>
</li>
</ul>
</div>
Try this:
.my-divider {
position: relative;
left: 100px;
}
.my-divider::before {
content: "";
position: absolute;
top: 50%;
left: -100px;
width: 100px;
border-bottom: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-md-offset-4 col-md-8 my-divider">TEST</div>
</div>
</li>
</ul>
Values are a bit arbitrary so change those to suit.
I'm working on a website, you can view the website here.
Issue:
When you click the "Bestill nå" button at the top right corner, you can see that the positioning of the button changes when clicked.
How can I make it so that the positioning is the same when the button is clicked?
Here is the full header HTML:
<header id="hjem">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="Hjem" href="#hjem" title="FantasyLab">
<img src="images/fantasylab-logo.svg" style="width: 160px;">
</a>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-left">
<li><a class="se1" href="#om-fantasylab">Om Fantasylab</a></li>
<li><a class="se2" href="#referanser">Referanser</a></li>
<li><a class="se3" href="#lansering">Lansering</a></li>
<li><a class="se4" href="#kontakt">Kontakt</a></li>
</ul>
<div class="social pull-right" style="margin: 13px 140px 0 0">
<img class="facebook" src='images/social-sprite.svg' alt='Icons'>
<img class="twitter" src='images/social-sprite.svg' alt='Icons'>
<img class="youtube" src='images/social-sprite.svg' alt='Icons'>
<img class="linkedin" src='images/social-sprite.svg' alt='Icons'>
<img class="google-plus" src='images/social-sprite.svg' alt='Icons'>
</div>
</div> <!-- navbar-collapse -->
</div> <!-- container -->
<!-- Trigger the modal with a button -->
<div class="container">
<button type="button" class="header-button btn btn-default navbar-btn pull-right" data-toggle="modal" data-target="#myModal">Bestill nå</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">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>
</nav>
</header> <!-- header -->
CSS I have added for the modal function:
.modal-backdrop {
position: relative !important;
}
Any help is appreciated, thanks!
EDIT:
After adding this CSS:
body.modal-open {
overflow: auto;
padding-right: 0 !important;
}
It fixed the problem. However the padding-right: is coming from element.style on class="modal-open" which has a default padding-right: 17px;. I believe this gets added to the body by jQuery. Does anyone know how I can remove this from the jQuery instead of adding it in the CSS?
jQuery code for the modal button:
(function($){
// Defining our jQuery plugin
$.fn.paulund_modal_box = function(prop){
// Default parameters
var options = $.extend({
height : "250",
width : "500",
title:"JQuery Modal Box Demo",
description: "Example of how to create a modal box.",
top: "20%",
left: "30%",
},prop);
//Click event on element
return this.click(function(e){
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
});
/**
* Add styles to the html markup
*/
function add_styles(){
$('.paulund_modal_box').css({
'position':'absolute',
'left':options.left,
'top':options.top,
'display':'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border':'1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px',
'background': '#f2f2f2',
'z-index':'50',
});
$('.paulund_modal_close').css({
'position':'relative',
'top':'-25px',
'left':'20px',
'float':'right',
'display':'block',
'height':'50px',
'width':'50px',
'background': 'url(images/close.png) no-repeat',
});
$('.paulund_block_page').css({
'position':'absolute',
'top':'0',
'left':'0',
'background-color':'rgba(0,0,0,0.6)',
'height':'100%',
'width':'100%',
'z-index':'10'
});
$('.paulund_inner_modal_box').css({
'background-color':'#fff',
'height':(options.height - 50) + 'px',
'width':(options.width - 50) + 'px',
'padding':'10px',
'margin':'15px',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px'
});
}
/**
* Create the block page div
*/
function add_block_page(){
var block_page = $('<div class="paulund_block_page"></div>');
$(block_page).appendTo('body');
}
/**
* Creates the modal box
*/
function add_popup_box(){
var pop_up = $('<div class="paulund_modal_box"><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
$(pop_up).appendTo('.paulund_block_page');
$('.paulund_modal_close').click(function(){
$(this).parent().fadeOut().remove();
$('.paulund_block_page').fadeOut().remove();
});
}
return this;
};
})(jQuery);