The first time I click on add button modal is showing.
After clicking on remove button it is closing.
When I repeat the same scenario clicking on add button the modal is showing but after that clicking outside the modal is getting it closed.
I use bootstrap css.I didnt implemented this functionality.
<button data-toggle="modal" data-target="#modalPopup" data-backdrop="static" data-keyboard="false">
<div class="modal fade" id="modalPopup" tabindex="2" role="dialog" aria-labelledby="item-quantity" aria-hidden="true"> </button>
I don't see your button's close tag </button>. Try this
<button data-toggle="modal" data-target="#modalPopup" data-backdrop="static" data-keyboard="false">Test</button>
<div class="modal fade" id="modalPopup" tabindex="2" role="dialog" aria-labelledby="item-quantity" aria-hidden="true">
</div>
Related
Good day,
I am building a web app using EJS, Express and Node. In this app I want to pass some data to my bootstrap-modal window. The problem is that I am passing correctly the string to the modal but only the first 75 chars! the rest is getting cut.
In the table I am showing this button next to each row:
<td><button type="button" class="btn btn-primary" data-tomodal=<%=JSON.stringify(MyList[index])%> data-toggle="modal" data-target="#exampleModal">Edit</button></td>
The incomplete code of the modal is:
<!-- Modal -->
<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">
...
</div>
</div>
</div>
</div>
To read the data from the modal that I am passing I use this script.
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('tomodal') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
console.log(recipient)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
The thing is that, it works but it only shows the first 75 chars!.
Additionally, this is the best way I found to aproach this problem, seeing the trouble I am having maybe is not the best way to go, so any tips would be very helpful.
Thank you.
I have a django application. when a user clicks the submit button two modals should be shown one after another each has to do different functions in views.py in my django app. I am trying to write the code but the problem is not easy and I have looked everywhere and couldn't get the answer.
I have to write the code in the following way:
views.py
def submit(request):
#first modal should pop up which has two options.
#second modal should pop up which also has a two options.
and when the user clicks any of the buttons each should also call the different function in views.py.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="btn btn-danger custom" style="position:absolute; left:800px; top:180px;" type="submit">Update the data</button>
# user clicks a button in form and modal should pop up
# then 2 modals should pop up
# the first modal has two buttons
# when user clicks the update button the function in the views should be called and also 2nd modal
should pop up
<!--modal 1-->
<div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="UpdateModal" role="dialog"
tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Changes</h5>
<button aria-label="Close" class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
#when user clicks update button another modal should pop up as well as
another function in the views should be called.
</body>
</html>
You could do that by using the modal system from the bootstrap documentation, you can check the live demo
In your template use a condition with Jinja2 if first condition show modal 1, else show modal 2, just make sure you have 2 different ID for the modal so they open distinctly
I've added a youtube video to my website that starts automatically at boot-up on the home page. The video opens as bootstrap modal pop up. However, when pop up closes, the video starts playing again in the background.
First, I want the video to start automatically.
Second, the video is automatically stopped when "pop up" is turned off.
Third, don't let the pop-up video start playing again in the background.
Version * Bootstrap v3.0.3
Thank you in advance for your help.
<!-- POPUP SCRIPT -->
<script>
$(document).ready(function(){
$("#myModal").on("hidden.bs.modal",function(){
$("#iframeYoutube").attr("src","#");
})
})
$(document).ready(function(){
$("#myModal").modal("show");
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
<!-- HEADER -->
<header id="header" class="main__header"> </header>
<!-- POPUP BAŞLANGIÇ -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color: #f9f9f900;">
<div class="modal-body" style="padding: 0px;">
<button type="button" class="close" style="padding:8px; background: white;" data-dismiss="modal">×</button>
<iframe id="iframeYoutube" width="100%" height="450px" alt="1" src="https://www.youtube.com/embed/example?&autoplay=1;rel=0&showinfo=0&controls=0&" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- POPUP BİTİŞ -->
Firstly, you should trigger a function when pop-up is closed.This function should stop video to be played in the background.
$("#modal-close-button").click(function () {
$("#video-stop-button").click();
});
$("#video-stop-button").click(function () {
alert("The video should stop as the modal closes because a click on the close button will trigger the stop button ");
});
You should call this function whenever your pop-up is closed to prevent video to be played in the background.
I am just wondering why this modal isn't picking up the correct values. When I click on the button it will only display one value's additional information. I read somewhere it maybe due to some id thing but can't figure it out.
try to change your code as follows
<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#breedModal">Click Here</button></td>
to
<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#breedModal_{{forloop.counter}}">Click Here</button></td>
and
<div class="modal fade" id="breedModal" tabindex="-1" role="dialog" aria-labelledby="breedModalLabel" aria-hidden="true">
to
<div class="modal fade" id="breedModal_{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="breedModalLabel" aria-hidden="true">
Now, I will generate unique model id's for each row.
In essence what I am saying is that you have:
<div class="modal fade" id="breedModal" ...
But you're creating this multiple times within the iteration (for loop). You need to have the id unique so I suggested something more like:
<div class="modal fade" id="breedModal{{ breed.id }}" ...
Anyways, you'd need to change the reference to this aswell:
<button type="button" data-target="#breedModal{{ breed.id }}"...
That way you have a unique id for each modal so when you click the button it knows which of the many modals it should open.
Currently all of the buttons say open #breedModal but because there are many of them you are only seeing the first one.
EDIT:
In reality though you don't have the breed.id value in your database so use a key value pair in your for iteration, see here https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#for.
So then you have:
{% for key, breed in breeds %}
Then instead of trying to use breed.id as I suggested just use key (is going to be a numeric key relating to the record index) so your id attribute will render as breedModal0, breedModal1, etc.
in my page
foreach ($json->items as $sam) {
$link= $sam->id->videoId;
echo''.$link.'';
//its showing last 5 youtube video id ok.. i set every video id witha button for modal
echo'<button type="button" data-toggle="modal" data-target="#PlayModal" class="btn btn-outline btn-danger">Play</button>';
}
but when im trying to open a model by box in new winddow pop up there only show 1st video ID. modal not getting '.$link.' valu in popup window. modal code puting same page blew finish {}
echo'<div class="modal inmodal" id="PlayModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-body">
<p>'.$name.'</p>
<div class="modal-footer">
<button type="button" class="btn btn-outline btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>';
According to the code given, even the first video should not play.
it is not printing the value of LINK inside the button, so it will not work.
Unless you have a JAVASCRIPT code observing the click and playing the video on click.
You can create the HTML code first manually containing the 5 video ID, and each video should have a button (according to your description), when clicked it will open the modal.
once that is done, you will be able to use php for each to properly echo the html code.
alternatively, the videos are in HTML list, and javascript will handle the event click, reading the video ID and passing to the player in the modal.
in either case, you need to understand the HTML structure first.