I am trying to open a modal popup from a javascript block. This is a basic modal that I found in w3schools: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal&stacked=h
Here is my code :
<script>
function showModal(){
window.location.href = '#myModal';
}
</script>
<!-- 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>
Instead of JavaScript you an use default bootstrap function
function showModal(){
$('#myModal').modal('show')
}
window.location.href does not have what is known as a setter, which means it cannot be assigned a new value. It does have a getter as standard (a requirement, really), so you can get it.
If you want to open a link, try window.open("#myModal");, or use jQuery with $('#myModal').modal('show');
Related
I would like to have a button when clicked opens up a modal form hosted on another server.
Say the button is on www.web.com/review
Then when you click a button, it opens the modal box on another server and domain www.example.com/modal.
I would like to have a button as below on server A on URL www.web.com/review;
<button type="button" class="btn btn-primary btn-lg btn-flat" data-toggle="modal" data-target="#review-box"> Write a review</button>
When clicked opens up the modal on another server B on URL www.example.com/modal.
<!-- Modal -->
<div class="modal fade" id="review-box" 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>
Can this be done or is it far fetched?
From internal server you need to put script frm the button that point to the external link, if you want to hide the external address you can use iframe or point to the modal directly.
function ExternalLink() {
let url = 'https://www.externallink.com/;
window.open(url,"theFrame");
}
html
<container>
<button onClick=ExternalLink()></button>
<iframe class="embed-responsive-item" name="theFrame" src="#">
<div class="modal fade" id="myModal" role="dialog">
</iframe>
</container>
I want a bootstrap modal to appear on the bottom left corner of the page on page load and allow it to disappear only when the x button is clicked and not when clicked anywhere on the screen. I have got these working till now but the next issue is that when the bootstrap modal is loaded it prevents any background activity like page scrolling or link clicking or any such thing and adds a background shade with opacity in front of the screen. How can I make the shade disappear and allow accessing the website while the modal is loaded and displayed in the bottom left corner?
Here are my codes.
<script>
$(document).ready(function() {
$(window).on('load',function(){
$('#myModal').modal('show');
});
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
});
</script>
<div id="myModal" class="modal fade" 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>
Sounds like your not after a modal dialog, but something that looks like one.
You can still render a modal, but don't call .modal on in, and then just handle the close events yourself.
eg.
$(document).ready(function() {
$(window).on('load',function(){
var m = $('#myModal');
m.show();
m.find("button").on("click",
function () { m.hide(); });
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myModal" class="modal show" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</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>
How do I add a bootstrap modal in the the javascipt on click. So far I was only able to alert ("hello") on click. How do i prompt out a modal box?
graph.on("click", function (params) {
var node = params['nodes'][0];
displayInfo=false;
if(node!=null){
console.log('node:'+ params['nodes'][0]);
x = params["pointer"]['canvas']['x'];
y = params["pointer"]['canvas']['y'];
displayInfo=true;
lastNode = nodes.get(node);
lastClick = params['pointer'];
//console.log(node);
}
alert("hello");
//add boostrap modal here
});
You don't need an onclick.
<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>
<div id="GSCCModal" class="modal fade" 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" aria-hidden="true">× </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>
If you need an onclick event anyhow, use it like below:
graph.on("click", function (params) {
$('#myModal').modal('show');
}
Reference: http://getbootstrap.com/javascript/#modals
Create modal HTML and assign id for it, for example "my_modal"
http://getbootstrap.com/javascript/#live-demo
show the modal at the js using the code:
$("#my_modal").modal('show');
First make the modal pop up div then , Configure and use .modal('show')
For eg:-
You can also use onClick call for jquery here.
<div id="modalDiv">
//some content
</div>
In jquery use ,
$("#modalDiv").modal('show');
Check this http://getbootstrap.com/javascript/#live-demo
You can use id like
$("#modal-id").modal("show");
Or you can use class name $(".modal-class").modal("show");
I have a simple html design with an animated menu. I am trying to implement bootstrap on it and make modal window. But when someone clicks at contact, my animated menu stops working. Here you can check the problem.
My modal code here. I'm using #mymodal on menu link.
<!-- 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 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>
You can do this using Jquery
$(document).on("click",".menu",function(){
$("#myModal").modal("show")
})
I've got a google table that listens to a select event and then shows a modal bootstrap. Is it possible to have my modal text display data from the selected row?
google.visualization.events.addListener(table, 'select', function () {
var row = table.getSelection()[0].row;
alert(data.getValue(row, 0))
$("#myModal").modal();
});
The alert shows the string I want in my modal window as well.
With the following 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 edit-content">
<p id='inputId'>Display text here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try
var modalcontent = data.getValue(row, 0);
$("#inputId").html(modalcontent);
right before $("#myModal").modal();
Here you can find the doc for this method.