I want to store a modal in a variable and then show the modal when a user clicks a button. I tried this but nothing happens when I click the button and there is no console error.
$( '.outlet' ).on('click', function(e) {
e.preventDefault();
var prodID = $(this).data('id');
var modal = `
<div class="modal fade" 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>
<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>
`;
$(modal).show();
});
You have to bind the modal to the DOM, to make it visible. In your code the HTML of your modalvariable is not in the DOM, and that's why it is not displayed.
like show here:
$("body").before(modal).show();
Althought you won't need show()since your attaching the HTML to the DOM with the beforefunction (except it the HTML code has a style property set to display:none or you want a animation or ...).
Here the working example. I added some HTML to make the Example run.
$( '.outlet' ).on('click', function(e) {
e.preventDefault();
var prodID = $(this).data('id');
var modal = `
<div class="modal fade" 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>
<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>
`;
console.info("IN THE CLICK FUNCTION");
$("body").before(modal);
$(".modal").show();
});
.modal {
margin:50px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="outlet">test</button>
</body>
Related
I have a bootstrap modal on load page it works properly but I want to add class to an element if it active and remove it if it not active I tried the following but it doesn't work properly!
here is the example
$(window).load(function() {
$("#myModal").modal("show");
});
if ($("#myModal").hasClass("in")) {
$(".test").addClass("active");
} else {
$(".test").removeClass("active");
}
.test {
width: 100px;
height: 100px;
background-color:#e0e0e0;
}
.active {
background-color:#000;
}
<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>
<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>
<div class="test"></div>
Use shown.bs.modal and hidden.bs.modal to detect modal is open or not then add or remove class.
$(window).load(function() {
$("#myModal").modal("show");
});
$('#myModal').on('shown.bs.modal', function() {
$(".test").addClass("active");
console.log('Active');
}).on('hidden.bs.modal', function() {
$(".test").removeClass("active");
console.log('Not Active');
});
.test {
width: 100px;
height: 100px;
background-color: #e0e0e0;
}
.active {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<div class="test"></div>
I am trying to change the modal-body text when modal trigger button is clicked . But modal is openning but modal-body text is not changing .
This is the code for modal
<button type="button" class="btn btn-info open-modal" data-remote="false" data-toggle="modal" data-target="#myModal">Register</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>
Then source for preventing default event
$('.open-modal').click(function(e)
{
e.preventDefault();
alert('hello i am jquery');
$('#myModal').modal('show');
});
Why alert('hello i am jquery'); line is not executing ?
This may happen when your HTML takes precedence over jquery since your button specifes the target modal to open with the following attributes
data-remote="false" data-toggle="modal" data-target="#myModal"
Remove those and then the jquery will be fine
$('.open-modal').click(function(e)
{
e.preventDefault();
alert('hello i am jquery');
$('#myModal').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info open-modal" >Register</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>
To trigger a modal to show programmatically, you can use the following:
$('#myModal').modal('show');
You can also have an event handler being triggered and add your code in there:
$('#myModal').on('shown', function() {
alert('hello i am jquery');
})
In my case: Below code worked properly if the case fails:
$('#myModal').modal({show: 'false'});
i am trying to apply edit bootstrap build in Modal properties... I want to apply for opacity to only specif div not for whole body(default) how to we fix this?
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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>
<div class="change_me" id="changeme1">
some div content
</div>
When click on Open Modal pop up opens by changing the css property of body to opacity:0.6 but i am trying to apply opacity only for class .change_me how can we achieve this?
I think you mean you don't need all body show opacity,just for div.change_me,you can set this :
.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0!important;
filter: alpha(opacity=0)!important;
}
the set you div.change_me:
.change_me{
opacity: 0.6!important;
filter: alpha(opacity=60)!important;
}
then let div.change_me at right place;(edit for wrong number;)
So I have Bootstrap modal defined as:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And I want to edit the empty body with jscript. Im a beginner in Javascript so I'll appreciate the simplest answer.
Please have a look at this fiddle.
Here is the code:
$(function(){
$('.custom-modal').click(function(e){
e.preventDefault();
var mymodal = $('#myModal');
mymodal.find('.modal-body').text('hello');
mymodal.modal('show');
});
})
Try this one:
$('.modalShow').click(function(event){
event.preventDefault();
var e = $(this);
var title = e.data('title');
var body = e.data('value');
$('.modal-title').html(title);
$('.modal-body').html(body);
$('#myModal').modal('show');
});
the simplest solution is - you can use javascript's innerHTML to change html of your modal body like this -
//get your modal body by class and change its html
document.getElementByClass("modal-body").innerHTML = "<p>some text</p>";
I have done this in C# as follows.
C# :
System.Text.StringBuilder stringBuilder = new System.Text.StringBuilder();
stringBuilder.Append(#"<script language='javascript'>");
stringBuilder.Append(#"$('#errorModal').find('.modal-body').text('"+ your error message + "');");
stringBuilder.Append(#"$('#errorModal').modal('show');");
stringBuilder.Append(#"</script>");
ClientScript.RegisterStartupScript(this.GetType(), "JSScript", stringBuilder.ToString());
HTML :
<div class="modal fade" id="errorModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
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/