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/
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'm currently running an HTML template that has a placeholder div, and when the user clicks inside the div, a modal pops up with an instance of TinyMCE. So far so good.
TinyMCE works here as far as adding text/content, and then you hit a button that closes the modal and passes the content into the placeholder div in the same format. (Think of it like the user viewing a template for a static page, they want to insert content so the modal allows them to use TinyMCE to do so and then they hit the button to view it in the 'live' template).
Anyway, this works fine. The problem is, if you notice an error or typo and need to call TinyMCE again, It won't work. Once the content passes to the div, it no longer triggers the modal when clicking in the div. I'm not a JavaScript expert by any means so I'm sure something is wrong on that side.
Here's the code. Everything works as expected, but I just need to be able to keep the action of clicking the div and loading the modal to edit the content from TinyMCE:
<div class="row middle">
<div class="col-lg-12 fullWidth">
<div class="fullContent" style="background-color: white; height: 100%;">
<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var $modalFull = $('#fullModal').modal({
show: false
});
$('.fullWidth').on('click', function() {
$modalFull.modal('show');
});
$(document).ready(function() {
$("#form-data3").submit(function(e) {
var content3 = tinymce.get("mytextarea3").getContent();
$(".fullContent").html(content3);
jQuery.noConflict();
$('#fullModal').modal('hide');
$('.modal-backdrop').remove();
return false;
});
});
</script>
With $(".fullContent").html(content3);, you are overwriting the modal's markup.
Place it outside that div.
<div class="row middle">
<div class="col-lg-12 fullWidth">
<div class="fullContent" style="background-color: white; height: 100%;">
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</div>
</div>
my bootstrap modal is appearing blue line at the top and bottom of the modal. I didn't know why the blue line is appearing at the top and bottom of the modal. I want to remove the blue line. I am weak in English please apologize me if I made any grammatical or spelling mistakes.
HTML CODE:
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" 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" style="text-align:center">Are you sure you want to Delete it?</h4>
</div>
<div class="modal-body">
<div class="form-group" style="text-align:center">
<h6>By clicking on Yes button your ad will be Delete.</h6>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="sayyes">Yes</button>
</div>
</div>
</div>
</div>
CSS CODE:
.vcenter{
position: relative;
top: 50%;
transform: translateY(-50%);
}
IMAGE:
Just add this style style="outline: none !important" to your main div.
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="outline: none !important">
The blue lines will be gone.
Probably you are over ridding some styles,
<div class="container">
<h3>Modal Example</h3>
<div>
Launch Modal
</div>
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</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>
</div>
<style>
DEMO
I want to show a popup box after a successful update. What i did is
In controller
var objContext = new KnittingdbContext();
objContext.ProductTypes.Attach(producttype);
var obJBlog = objContext.Entry(producttype);
obJBlog.Property(a => a.ProductTypeCode).IsModified = true;
obJBlog.Property(a => a.ProductTypeName).IsModified = true;
objContext.SaveChanges();
TempData["SuccessEdit"] = "a";
return RedirectToAction("vwProductTypeIndex");
and in vwProductTypeIndex view
#if (TempData["SuccessEdit"] != null)
{
<div class="green">
<p style="color:green;">Updated Successfully</p>
</div>
}
But the problem is this only shows a text.
I have a message box created using css
<!--popup model-->
<div class="modal fade" id="basic" role="dialog" aria-labelledby="basic" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="background-color:#ffffff; borderolid 4px #44d775;margin-top:253px; left:-25px;">
<div class="modal-header" style="background-color:#44d775; height:15px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top:-12px;">x</button>
<span class="glyphicon glyphicon-ok" style=" color:yellow; font-size:large; top:-10px; left:115px;" aria-hidden="true"></span>
<h4 class="modal-title" id="myModalLabel" style="text-align:center;"></h4>
</div>
<p style="text-align:center; font-family:'Ebrima'; color:black; margin-top:15px;"> <strong> saved Successfully </strong></p>
</div>
</div>
</div><!--/end popup model--
I want this popup box to appear instead of that text. How can i achieve this? Thanks in advance!
try to your div tag and pass the id
<div class="green" data-toggle="modal" data-target="#basic">
<p style="color:green;">Updated Successfully</p>
</div>
You can use the Bootstrap modal here like this
#if(TempData["SuccessEdit"] !=null)
{
<div 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">Change Password</h4>
</div>
<div class="modal-body">
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
}
First add your modal in end of your body tag, or wherever you want, like this:
<body>
<!-- your other codes -->
<div class="modal fade" id="basic" role="dialog" aria-labelledby="basic" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="background-color:#ffffff; borderolid 4px #44d775;margin-top:253px; left:-25px;">
<div class="modal-header" style="background-color:#44d775; height:15px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top:-12px;">x</button>
<span class="glyphicon glyphicon-ok" style=" color:yellow; font-size:large; top:-10px; left:115px;" aria-hidden="true"></span>
<h4 class="modal-title" id="myModalLabel" style="text-align:center;"></h4>
</div>
<p style="text-align:center; font-family:'Ebrima'; color:black; margin-top:15px;"> <strong> saved Successfully </strong></p>
</div>
</div>
</div>
</body>
And in scripts section add following code:
#section Scripts {
#if((bool?)TempData["SuccessEdit"] ==true)
{
<script type="text/javascript">
$(document).ready(function(){
$('#basic').modal('show');
});
</script>
}
}
Now you could add following line in your action method:
TempData["SuccessEdit"] = true;
You must also add jQuery and bootstrap.js in your view as well.
I have the modal window (bootstrap 3):
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
</div>
</div>
</div>
By clicking on "NEXT" button, #modal1 is closing and #modal2 is opening:
<div class="modal fade" id="modal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT //lots of text
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="EXIT" data-dismiss="modal"/></form>
</div>
</div>
</div>
Scrolling is working fine in the first modal window #modal1, but in the #modal2 it is not working, there is not even the scrollbar.
So, the question is: How to make the scrolling work in the second window?
UPD: added jsfiddle: http://jsfiddle.net/386ozdb7/2/
If you indent your code correctly you can see that div with class "modal-footer" are not inside the div with "modal-content" as the documentation suggest. Maybe that can be the problem of scrollbar with a lot of text
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT
</div>
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
</div>
</div>
Try to change your 2 modals as below:
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
</div>
</div>
</div>
</div>
check the bootstrap example at: http://getbootstrap.com/javascript/#modals
ps: always indent your code.. it's useful to reduce markup error!
Thats the problem: http://getbootstrap.com/javascript/#overlapping-modals-not-supported
Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
This may help you: https://github.com/jschr/bootstrap-modal
Solution:
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}