I want to vertically center a modal. I searched a lot on Google but found nothing helpful. Here is my code:
function inactive(id, ths) {
$("#confirmation").modal("show");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade bs-example-modal-sm" id="confirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" 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">Are you sure you want to inactivate it?</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="yes">Yes</button>
</div>
</div>
</div>
</div>
How can I center it vertically?
Not tested but you can try this
.yourElement{
position: relative;
top: 50%;
transform: translateY(-50%);
}
There is a specific bootstrap class (v4.1) for this:
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Source: https://getbootstrap.com/docs/4.1/components/modal/#vertically-centered
As it looks as a bootstrap modal, Checkout this Fiddle (jsFiddle).
Try
.modal-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
Hope this helps!
By adding position and transform properties, you wouldn't get it to be centred across all widths and devices, plus calculating it all the time could be a tedious process. Here is what worked by styling just the '.modal-dialog' class
/* Center a bootstrap modal Vertically and horizontally */
.modal-dialog {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
/* and Viola! */
Try this:-
// Vertical centered modals
// you can give custom class like this // var modalVerticalCenterClass = ".modal.modal-vcenter";
var modalVerticalCenterClass = ".modal";
function centerModals($element) {
var $modals;
if ($element.length) {
$modals = $element;
} else {
$modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 0 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
centerModals($(this));
});
$(window).on('resize', centerModals);
/* scroll fixes */
.modal-open .modal {
padding-left: 0px !important;
padding-right: 0px !important;
overflow-y: scroll;
}
/* centering styles for jsbin */
html,
body {
width:100%;
height:100%;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
body > .btn {
display: block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 vertically centered modal and scroll fixes</title>
<meta name="description" content="Bootstrap 3 vertically centered modal and scroll fixes">
<!-- include bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- include bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Easiest (not tested cross-browser but should be ok):
HTML:
<div class="container">
<p>Container</p>
<div class="modal">
<p>Modal</p>
</div>
</div>
CSS:
.container {
position:relative;
}
.modal {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
Here's the fiddle:
http://jsfiddle.net/o9pbgnz5/
It's important that you set both top:0 and bottom:0. Then, margin-top:auto and margin-bottom:auto should take care of the vertical centering. In this example, the shorthand 'margin:auto' centers it both horizontally and vertically.
P.S. Also works with position:fixed;
Centering the modal vertically can be done if you use CSS calc() function on the top CSS property. Let's say that the modal has a height of 600px. Using the vh unit with a value of 50 will get you the midpoint on the vertical height of the screen. Then you just need to subtract half of the height of the modal element.
#modal {
position: fixed;
height: 600px;
top: calc(50vh - 300px);
z-index: 100;
}
if you are using bootstrap 4 or above you can simply use bootstrap classes modal-dialog modal-dialog-centered
function inactive(id, ths) {
$("#confirmation").modal("show");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-dialog modal-dialog-centered fade bs-example-modal-sm" id="confirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" 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">Are you sure you want to inactivate it?</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="yes">Yes</button>
</div>
</div>
</div>
</div>
Related
my code is a mess and I know it. I really just need some help.
I have a series of two codes for which people will want definitions. When someone hovers over Code 1 and Code 2, it turns dark blue. That part works fine. I want a Bootstrap Modal to pop up when someone clicks on the "block" or within the <article> and </article> tags. This would be easy with a button, but my users don't want a button. I'm lost here and I've looked through various forums, codepens, etc and just haven't found the solution. I know what I have here is messy, but I'm here to clean it up and get this resolved. Thank you in advance.
<main>
<article><b>Code 1</b><br><br>
<div class="wrap">
<a href="#" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-new">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="body-message">
<h4>Code 1 Title</h4>
<p>Code 1 Definition
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</a>
</article>
<article><b>Code 2</b><br>
<div class="wrap">
<a href="#" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-new">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="body-message">
<h4>Code 2 Title</h4>
<p>Code 2 Definition
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</a>
</article>
</main>
<style>
* {
box-sizing: border-box;
}
main {
max-width: 1100px;
margin: 15px auto;
padding: 0 15px;
width: 100%;
display: grid;
/* Define Auto Row size */
grid-auto-rows: 215px;
/*Define our columns */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
}
article {
border-radius: 10px;
padding: 10px;
color: #fff;
background-color: #55BBE9
}
article:hover {
background-color: #1B2631;
}
modal-body {background-color: #55BBE9
}
</style>
Add data-toggle="modal" data-trigger="click" data-target=".bs-example-modal-new" to the <article> tags.
Example here
I am new to javascript. Now I have a link in home page which redirects to other html page, but I want to show that as a popup in my home page with responsiveness and some styles like a corner is folded.Is there any way to do that in javascript.
Thank you
You can simply use <iframe> to display the another page content in the modal content.
$(window).load(function(){
$('#exampleModal').modal('show');
});
iframe {
display:block;
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe src="www.google.com">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
It's called "modal box", and here is how to do it: https://www.w3schools.com/howto/howto_css_modals.asp
As for styling, you can simply use CSS. For example to round corner in the linked example, just add e.g. border-radius: 25px; to .modal-content, so that you have
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius: 25px;
}
For folded corners in specific, there are also plenty of examples, e.g. https://codepen.io/brownerd/pen/lEHwL or https://stackoverflow.com/a/55457088/9593181
I've got a long full screen popup modal(parent-modal). Inside this modal(parent-modal) there is another popup modal(child-modal).
If I scroll the "parent-modal" and then open "child-modal", the "child-modal" modal is not vertically centered.
hope this might be useful to you!
.modal {
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<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>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<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>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</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>
Try this style with child modal:
#parent-modal{
position:relative;
}
#child-modal{
position:absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
I want to show a modal using jQuery, but all window becomes blured like this:
This is the js:
$(document).ready(function () {
$('#addLocation').click(function () {
$('#locationModal').modal('show');
})
$('#addDepartment').click(function () {
$('#departmentModal').modal('show');
})
$('#addRole').click(function () {
$('#roleModal').modal('show');
})
});
And html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pending Requests</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/settings.css"/>
<link rel="stylesheet" type="text/css" href="css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<div class="icon-bar" style="float: left">
<div class="employee"><i class="fa fa-home"></i></div>
<div class="employee"><i class="fa fa-list"></i><!--Summary--></div>
<div class="employee"><i class="fa fa-globe"></i><!--Plan details--></div>
<div class="employee"><i class="fa fa-building-o"></i><!--Company holidays--></div>
<div class="employee"><i class="fa fa-calendar-check-o"></i><!--Team calendar--></div>
<div id="manager"><i class="fa fa-clock-o"></i><!--Pending requests--></div>
<div id="hr"><i class="fa fa-cog"></i><!--Settings button--></div>
<div class="employee"><i class="fa fa-power-off"></i></div>
</div>
<div class="container">
<div class="container-fluid">
<div class="row">
<div>
<button id="addUser">Create user</button>
</div>
<div>
<button id="addLocation" >Create location</button>
</div>
<div>
<button id="addRole">Create role</button>
</div>
<div>
<button id="addDepartment" >Create department</button>
</div>
<div>
<button id="addOfficialHoliday">Add official Holiday</button>
</div>
</div>
<div id="locationModal" class="modal fade" tabindex="-1" role="dialog">
<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">Location name</h4>
</div>
<div class="modal-body">
<form>
<input id="locationName" />
</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">Add new location</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
<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">Role name</h4>
</div>
<div class="modal-body">
<form>
<input id="roleName" />
</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">Add new role</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="departmentModal" class="modal fade" tabindex="-1" role="dialog">
<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">Department name</h4>
</div>
<div class="modal-body">
<form>
<input id="departmentName" />
</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">Add new department</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
<!--Include jQuery-->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.serializeObject.min.js"></script>
<!--Include js created for this page-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
</body>
</html>
the css:
body {
background-color: #eeeeee;
}
.container {
margin-left: 6vw;
max-width: 980px;
width: auto;
border-radius: 15px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
How to fix this ? What can be the cause of the problem ? Is a better way to make bootstrap-modal ?
Just add data-backdrop="false" to your modal. so... the code will look like this:
<div id="locationModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">
that's it! your modal will show on top. Hopefully will help.
These are the default Bootstrap z-index settings:
#zindex-navbar: 1000;
#zindex-dropdown: 1000;
#zindex-popover: 1060;
#zindex-tooltip: 1070;
#zindex-navbar-fixed: 1030;
#zindex-modal-background: 1040;
#zindex-modal: 1050;
.modal should have the z-index value of 1050, if these default settings haven't been changed. Theoretically, if you delete that line with z-index: 1; it should use the default value defined by Bootstrap before your user css
I have a modal that appears at page load during 3 seconds.
I would like to change the default position to place it near a certain I choose (it would be in the example below on the span with id=zone1)
<div id="deal-zone">
<div class="area">
<span class="thezone" id="zone1" data-toggle="modal" data-target="#myModal"/></span>
</div>
</div>
<!-- Here is the modal -->
<div class="modal in" id="notificationModal" role="dialog" aria-labelledby="notificationModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="notificationModalLabel" style="color:#DF2943;">
How to take part in the deal?
</h3>
</div>
<div class="modal-body">
<h4 style="margin-top:0px">
explanations
</h4>
</div>
</div>
</div>
</div>
<!-- Script that makes the modal autoload on page load -->
<script type="text/javascript">
$(window).load(function(){
$('#notificationModal').modal('show');
$('#notificationModal').fadeTo(3000, 500).slideUp(500, function(){
$(this).remove();
});
});
</script>
How can I achieve this ?
Here is a JSFIDDLE to help : http://jsfiddle.net/DTcHh/6941/: I want to put the modal just a little above the word "HERE" and still be able to read the word HERE (like a tooltip pointing to the word "HERE")
It's all about CSS positioning. Here's one example of how it can be accomplished.
CSS:
.testbox {
background: #000000;
color: #FFFFFF;
padding: 10px;
min-height: 200px;
}
.testbox .modal{
color: #333;
}
/* overwriting default behaviour of Modal Popup in Bootstrap */
body{
overflow: auto !important;
}
.modal{
overflow: hidden;
}
/* created new class for targetting purpose - named ".modal2", ".modal1" */
.modal2.in{
position: absolute;
bottom: 0;
right:0;
left: auto;
top: auto;
bottom: 0;
overflow: auto;
}
HTML:
<div class="testbox col-lg-6">
<h3><strong>Test Box</strong></h3>
<blockquote>
Modal Popup should <br />open inside (or aligned to) <br />this balck DIV area.
</blockquote>
<!-- .modal1 -->
<div class="modal fade bs-modal-sm modal1" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Default Modal Popup</h4>
</div>
<div class="modal-body">
Modal 1 Popup Content
</div>
</div>
</div>
</div>
<!-- .modal2 -->
<div class="modal bs-modal-sm col-sm-12 col-xs-12 modal2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Bound to <strong>Test Box</strong> DIV</h4>
</div>
<div class="modal-body">
Modal 2 Popup Content
</div>
</div>
</div>
</div>
</div>
You can get the position of the element you're wanting to target with .offset(), and then use a bit of math to change the margin-top of the modal based on where the element is in the viewport.
BOOTPLY
jQuery:
var location = $('#zone1').offset();
$('#notificationModal').css("margin-top", location.top - 100);
$('#notificationModal').modal('show');
$('#notificationModal').fadeTo(3000, 500).slideUp(500, function(){
$(this).remove();
});
HTML:
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="jumbotron">
<h1>Twitter Bootstrap 3.0</h1>
<p class="lead">Starter template with CSS and JS included.</p>
<p><a class="btn btn-lg btn-primary" href="http://yahoo.fr" target="_blank">link</a></p>
</div>
<div class="area">
<span class="thezone" id="zone1" data-toggle="modal" data-target="#myModal">HERE</span> i want to put the modal just above this word and still be able to see the word "HERE"
</div>
<div class="area2">
<span class="thezone2" id="zone2" data-toggle="modal" data-target="#myModal"></span>
</div>
<div class="modal in" id="notificationModal" role="dialog" aria-labelledby="notificationModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="notificationModalLabel" style="color:#DF2943;">
How to take part in the deal?
</h3>
</div>
<div class="modal-body">
<h4 style="margin-top:0px">
some explanations
</h4>
</div>
</div>
</div>
</div>
</div></div>
<div id="push"></div>
CSS:
body {
margin: 10px;
}
The simplest solution would just be that you position it in CSS.
It is not very nice, but let's go from here. Maybe we could make it better/variable with javascript or something.
.modal-dialog {
position: absolute;
top: 160px;
}
http://jsfiddle.net/DTcHh/6943/