I'm trying to implement a bootstrap modal directive from here: DOCUMENTATION but for some reason I cannot make it work.
When I click on the button which calls the function, it shows a line over the darker background as you can see here. However you can see the template loaded in the developer tools, check the gif.
You can check my gist with the files.
Any sugestion is welcome.
The problem is in this two divs:
YOUR CODE
<div class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Login / Register</h4>
</div>
<div class="modal-body">
<p>Login Form</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button">Register</button>
<button class="btn btn-success" type="button">Login</button>
</div>
</div>
</div>
</div>
CHANGE TO THIS
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Login / Register</h4>
</div>
<div class="modal-body">
<p>Login Form</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button">Register</button>
<button class="btn btn-success" type="button">Login</button>
</div>
</div>
the <div class="modal fade"> is who dont let see the rest of the content.
Related
I am using Django and I want to open a small forms window when I click on button 'Nouvelle Chirurgie' in template without changing the url and I don't know if I have to do it with js or no and how to do it, and after that how to save it in views. Actually, I'm this button take me to another page:
Nouvelle Chirurgie
So, what should I do?
You can use bootstrap for this
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
{{ form }}
</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>
These pesky modals are at it again. I can get my modal to pop up but for some bizarre reason, the text in its body just doesn't show. What's the deal? Here's the modal:
<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>Modal text.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Maybe it's the version of Bootstrap that you're using?
I just swapped your code out for an existing dialog on Codepen that uses Bootstrap 4.0.0 and it works:
https://codepen.io/richjava/pen/JxxyWP
<!-- basic modal -->
<!-- <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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 id="basicModal" 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>Modal text.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am writing a program with foundation reveal modal. When a modal is opened, the javascript need to stop executing until user has press the button in the modal, then only the javascript continue execute. This is more similar like Alert() function in javascript. Is it possible?
I need some guidelines, thanks!
Yes this is possible.
HTML:
<div id="modal_div" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="okbtn" type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<!-- end html-->
Javascript:
function hide_modal_on_click(top_level_modal_div, button) {
var top_level_modal_div = $("#modal_div").show();
var button = $("#okbtn").on('click', function() {
top_level_modal_div.hide();
})
}
hide_modal_on_click();
I am trying to do something which i think many people have done; and have read some examples etc; and have tried to piece together what i need but not having any luck. What I am trying to do is have a button pass a variable to a bootstrap modal. And then somehow echo or print the variable within the modal so i know it is working. I built some code from examples I found
here is my button:
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
</button>
I was not sure if i could echo the image id for the variable to be passed but have done a lot of stuff like that before so seems like it would be ok (this could be an issue though)
Secondly - here is my modal:
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
</div>
<div class="modal-body">
ok ok ok
<script>
$('#upload-images-modal').on('show.bs.modal', function(e) {
var yourParameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
alert(yourParameter);
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Cancel</button>
<button type="button" class="button">Add Images</button>
</div>
</div>
A couple of notes on this. I was really uncertain where the script should be "placed" in relation to the modal. So I just placed in the modal body.
I tried to do an alert to see the variable that was passed. Nothing is happening though. So I am hoping someone can give me some pointers on what I am doing wrong.
Thanks so much,
Gerard
Your issue could be down to using a early version of bootstrap where relatedTarget is not passed.
As in regards to your js, put it in the bottom of the body or in a separate js file reference from the bottom of the body and after any libraries, ie jquery and bootstrap.
Here is your code working with the latest bootstap version
$('#upload-images-modal').on('show.bs.modal', function(e, f, g) {
var yourParameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
alert(yourParameter);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.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>
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="test">Upload Images
</button>
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
</div>
<div class="modal-body">
ok ok ok
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
</button>
</div>
<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Cancel</button>
<button type="button" class="button">Add Images</button>
</div>
</div>
<!-- Modal -->
<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">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</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>
I currently have a page that asks the user if they want to actually do something. Currently, it works like this:
Do This Thing
<script type="text/javascript">
function promptUser() {
return confirm("Are you sure you want to do this thing?");
}
</script>
Now, the user wants to add some graphics, etc to the dialog. For that reason, I want to use the Bootstrap Modal window as I have it elsewhere in my code. I've added the following:
<div id="confirmDialog" class="modal hide fade">
<div class="modal-body">
Are you sure you want to do this thing?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="confirmed">Yes</button>
<button type="button" data-dismiss="modal" class="btn">No</button>
</div>
</div>
However, I'm not sure how to wire up the interaction with the link. If the user says "No", I want to stay on the page. If the user says "Yes", I want to redirect the user to the url in the href. How do I set this up?
Thanks
HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
click me
</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" aria-label="Close"><span aria-hidden="true">×</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" id="confirm">confirm</button>
</div>
</div>
</div>
</div>
JS
$('#confirm').on('click', funciton(){
window.location.href = "http://stackoverflow.com";
});
$('#confirmed').click(function(){
location.href = "some URL "
});
It will stay on no as it's default behavior or bootstrap modal and we have attached event on yes button on mention above.
Late to the party, but things have moved on in the last few years. For reference, in case anyone else needs to ask the same question, it might be easier to wrap the modal in a form, and use an input to respond:
<!-- Modal -->
<form action="letsdothisthing.php method="post">
<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" aria-label="Close"><span aria-hidden="true">×</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>
<input type="submit" class="btn btn-primary value="YES" ></input>
</div>
</div>
</div>
</div>
</form>