I have modal box like this:
<!-- Modal FOR PLAYERS-->
<div class="modal fade" id="Info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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>
<h3 class="modal-title" id="myModalLabel">Player profile for</h3>
</div>
<div class="modal-body info-player">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<label>GOALK IN THIS SEASON :</label> 11
</div>
</div>
</div>
</div>
</div>
</div>
And i have added a Span Element where users can click on it to get the relevant data:
<span class="playerInfo" data-toggle="modal" data-target="#Info">Info</span>
but now i wan to have some "data-XYZ='VALUE'" attributes in my SPAN Element and I want to parse to my modal box, how could I do someting like this?
I only know the way with an jquery onclick handler, but i think is also another better way or what you think?
Thanks for your help or any hints...
thanks
You can make use of the bootstrap shown.bs.modal event
Occurs when the modal is fully shown (after CSS transitions have completed)
$('#Info').on('shown.bs.modal', function() {
$(".playerInfo").data("xyz"); //value
// use the above data however you want
})
HTML:
<span class="playerInfo" data-xyz="value" data-toggle="modal" data-target="#Info">Info</span>
Related
I am trying to make a modal pop up by pressing a text link, but ive come across a pretty troublesome thing.
this is my code so far:
(this is part of a bigger project but ive simplified it to what its kind of like.)
Modal
<div class="modal fade" id="test" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<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>
</div>
<div class="modal-body">
TESTING
</div>
</div>
</div>
</div>
my problem is that if I try it out on jsfiddle. it works fine, but when I try it out on my IDE (VSCode) it doesnt work at all. Have I missed something?
I am using sublime text for my coding. I am working on a website contact page submission. I would like the button to be part of the contact page form.
Submit
<div class="modal" id="submitModal" tabindex="-1" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" dismiss="modal">×</button>
<h2 class="modal-title">Confirmation</h2>
</div>
<div class="modal-body">
<p>Your submission was successful!</p>
</div>
</div>
I would like the button to be responsive when clicked. However, it is responsive.
For school, I have to make my own website that shows some basic things to first years. So I got the idea, that I make a modal with Bootstrap. If you press the card, the modal will pop up.
Now, I want in the middle where 'CODE WHERE' is, to show the code for something. For example: let me just print or . But it won't let me, it will convert into HTML all the time and I don't want to convert it. I've looked a lot of pages, but I don't seem to find how. Anyone a solution?
Thank you very much.
<!-- Button trigger modal -->
<div style="cursor: pointer;" class="col-md-12" data-toggle="modal" data-target="#exampleModal">
<div class="card mb-4 shadow-sm">
<div class="card-body">
Text
</div>
</div>
</a>
</div>
<!-- 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">
<h5 class="modal-title" id="exampleModalLabel">Code</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<pre>
<code>
CODE HERE??
</code>
</pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close Modal</button>
</div>
</div>
</div>
First way is replacing < by < and > by > inside Your <code></code>.
Second way is make it change automatically in javascript:
var codeTags = document.querySelectorAll('code');
for (var i = 0; i < codeTags.length; i++) {
codeTags[i].innerText = codeTags[i].innerHTML;
}
Or easier in jQuery:
$('code').each(function(){
$(this).text($(this).html());
});
I am facing some issue on how to allow multiple modal dialog to run on a web.
When i include 2 modal dialog in my HTML code, the web page was unable to load.
Basically this is my HTML code
<div class="form-group">
<label>New User?
<a id="btn_signup_now" runat="server" data-toggle="modal" href="#mySignUp" data-backdrop="true">
Sign Up For Free Now
</a>
</label>
</div>
<div id="mySignUp" class="modal hide fade" role="dialog" tabindex="-1">
<div class="modal-header">
<asp:Button runat="server" class="close" data-dismiss="modal" aria-hidden="true" Text="*"/>
<h4 class="modal-title" id="myModalSignUp">Candidate Sign Up</h4>
</div>
Your code should be closer to this:
You are missing many elements that are necessary for a modal to work and have elements that may also be breaking it. You need this target="#mySignUp" to call the modal and you're also missing the <div class="modal-content"> and <div class="modal-header"> (and footer <div class="modal-footer"> if you feel it's needed. When I tested it your hide class broke it but that may be specific to what you are doing.
<div class="form-group">
<label>New User? <a id="btn_signup_now" runat="server" data-toggle="modal" target="#mySignUp" href="#mySignUp" data-backdrop="true"> Sign Up For Free Now</a></label>
</div>
<div id="mySignUp" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<h4 class="modal-title" id="myModalSignUp">Candidate Sign Up</h4>
</div>
<div class="modal-footer">
<asp:Button runat="server" class="close" data-dismiss="modal" aria-hidden="true" Text="*" />
</div>
</div>
</div>
</div>
On this example: HTML / CSS Popup div on text click
How can I make this load on the index page when they visit the site the first time. I don't want a button to click, I want this load automatically; and then have a close button when they read the content on the popup. Thanks in advance.
Hi you can do this using bootstrap model popup
for this include bootstrap css and js files and use below code
Your Html Code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="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">Intorduction</h4>
</div>
<div class="modal-body">
Body Text
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
then use this script
<script>
if (localStorage.getItem('showModal')!='yes')
{
localStorage.setItem('showModal','yes');
$('#myModal').modal('show');
}
</script>