When i put the class class="modal fade" the modal does not work. otherwise it works with an opaque background. please give me an insight into this matter.
thanks!
Ideally id need to see the code to judge.
Try checking your modal open sequence against this one that works perfect for me.
<div class="modal fade" id="createaccount" tabindex="-1" role="dialog">
Please post a fiddle if this doesnt work.
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.
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>
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.
I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.
Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?
(Small aside: the line that mentions using other elements, I have a problem with: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. If a button is focusable, I expect to be able to trigger it with the spacebar. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)
I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?
The buttons tags are usable in foundation 5. There is not a lot of documentation on it but (and I tested it to make sure I was correct) the <button> tag works as normal.
The <a> tag is used on the example site sure, but that doesn't limit its use when working with it.
You should still use <button> with forms and use <a> for links.
If you look at adioso.com (they use foundation) and inspect their forms, they use buttons for functional uses outside of links.
<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>
<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>
Check the above code. The example website isn't a very solid representation of what foundation can do but play with it a bit and you'll see its a very solid framework.