I have this following code:
<div class="btn slick-slide slick-active" data-toggle="modal" data-target="#photo-carousel-modal" data-slick-index="0" aria-hidden="false" style="width: 234px;">
<img class="img-holder img-thumbnail" src="image/path.jpg">
</div>
That was supposed to call for this modal here:
<div class="modal fade bs-example-modal-lg" id="photo-carousel-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
{{-- Modal's content --}}
</div>
</div>
</div>
It simply not triggers anything! Am I doing some stupidity and not realizing it?
P.S.: YES! The Bootstrap does work properly. I'm using it in other parts of the code and it works like a charm!
Make sure your bootstrap.js file is called AFTER your jQuery file like this:
<script src="path/to/jquery-file.js"></script>
<script src="path/to/bootstrap.js"></script>
(Also, remove any other bootstrap js file like bootstrap-modal.js, etc as bootstrap.js has everything in it already)
If the above is already done and it still is not showing, please post the codes from your <head....</head and the footer of your webpage on your question.
P.S. Check your browser console for errors so you can get a better idea on what is going on.
I found out later that my code had 3 call for jQuery library. one of them was after the bootstrap call. That's where I messed up!
(As a matter of fact, it was the other guy who works here.)
So, kids: DO NOT PLACE YOUR JQUERY CALL AFTER THE BOOTSTRAP CALL! It will make you go nuts!
Related
I'm unable to get my colour picker to work inside a modal. I've tried changing the z-index and adding the event handlers on modal show. Having a look at the console log and debugging the JavaScript, I can verify that the events are working but the colour values and slider positions are not updating.
<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<div class="color_picker_dialog" draggable="false">
<div class="hue_bar">
<div class="hue_picker"> </div>
</div>
<div class="sat_rect" draggable="false">
<div class="white"></div>
<div class="black"></div>
<div class="sat_picker"></div>
</div>
<div class="bottom">
<div class="color_preview"></div>
<input type="text" onkeyup="changeHex(this.value)" value="#FF0000" />
</div>
</div>
</div>
</div>
</div>
</div>
A quick example with a working colour picker and the non-working modal version:
JSFiddle
If you want to make use of the color picker events inside the modal then you could* initialize the listeners and the picker logic after the modal has been shown.
You can do that by using
$('#myModal').on('shown.bs.modal', function() {
// ... init all your modal here
});
Working example: https://jsfiddle.net/pz2Lams9/
Note, that the above code is not memory-leak save, as there are listeners added each time you show the modal. At this point you may do a revision of your code and rethink the way you connect client components with interaction logic.
Edit: you can also make use of hidden.bs.modal to unconnect your listeners and flush your variables.
Readings:
https://www.w3schools.com/Bootstrap/bootstrap_ref_js_modal.asp
https://getbootstrap.com/docs/4.1/components/modal/#events
https://getbootstrap.com/docs/3.3/javascript/#modals-events
Note:
*I am writing "could" because I am not 100% sure if this is the only way or if there are other ways to solve this, too.
I am learning how to create custom dialog box in HTML by following tutorials but haven't been able to quite understand how I can create them the way i want. I want to achieve something like below:
The first one I want to create contains a listview.
The second one is dialog box that has textbox to enter in keyword and add to database by clicking create.
I have followed tutorials but being a beginner, I haven't be able to full understand how to go about create, therefore any help would be nice.
Through searching online, I have been able to create using modals to come up with: http://jsfiddle.net/jLs8myoa/9/
<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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Input Form</h4>
</div>
<div class="modal-body">
enter keyword <input type="textbox" id="textbox1"> </input><br>
<button type="button">Search</button>
<div> Listview </div>
</div>
</div>
</div>
</div
Few tutorials i have followed
https://www.w3schools.com/howto/howto_css_signup_form.asp
https://www.youtube.com/watch?v=-RLE2Q7OzME
In your code modal opens properly, I can't see any problem over there.
You just need to advance a bit in HTML, and CSS.
Start with W3 schools, they have awesome and easy tutorials for HTML5 and CSS. I think you will be able to make what you want once your basic will be clear. There are many ways to design the modal you are making.
Follow this...
CSS Tutorials...
Custom modal without Bootstrap...
CSS modal...
I am fairly new to web development. I have this problem.. It is probably something simple but I can't seem to work it out.
I solved how to use a link to run some javascript. The javascript is supposed to open a modal but the script doesn't work.
To call my script I am using this: (I confirmed this works because I had placed an 'alert()' in the script to test if it went through)
<li>
<a data-toggle="modal" href="javascript:void(0)" onclick="showBugForm()">
<i class="fa fa-fw fa-bug"></i> Report a Bug
</a>
</li>
The script being called is:
function showBugForm(){
$('#repBug').modal('show');}
The main structure of my modal is shown below. I know the modal doesn't have any problems since I was able to load modal from a button, but I can't seem do it properly from an element. For the sake of context: I was able to load the modal by adding 'data-toggle="modal" data-target="#repBug"' to my button attributes, but I can't do the same with html link tag.)
<div class="modal fade" id="repBug" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Here's my Code -->
<div>
<div>
<div>
Any clues?
<a data-target="#repBug" data-toggle="modal" href="#repBug"><i class="fa fa-fw fa-bug"></i> Report a Bug</a>
Try this, it will solve your problem .Calling any function is not required here. Your modal will open directly on click of this anchor tag.
The issue I was having was because I missed to add:
<?php include_once('bug-form.php'); ?>
To my index.php file .. Because I had the code written in different php file named 'bug-form.
I have looked at a few questions on here that are having the same issue I am having, but I can not seem to resolve my issue.
I am wanting to display a modal in certain scenarios... So I will need to show/hide based on certain scenarios. This is what I have :
ASP.NET
<div class="modal fade" id="lockUser" runat="server" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Warning</h4>
</div>
<div class="modal-body">
<p>Watch out! Your about to be locked out.</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
function openModal() {
$('#lockUser').modal('show');
}
C#
ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
I have the C# code in a click event, everything in the event fires except for the above line...
Maybe I a missing something really stupid
Any suggestions?
First thing to do is make sure that the openModal() method works. If it does, then move the script files (bootstrap.min.js, etc.) and functions from the bottom of your page to inside <head>..</head>.
I have an issue with the ooyala video embed code:
<script height="433px" width="770px" src="http://player.ooyala.com/iframe.js#ec=x0bjlycjpE7-g-D_2ZMGTcpUDGwEamhd&pbid=4441ed2a84e74b66b60ce980f20deb84"></script>
When I add this script in the main body it works fine. But when I add this script in a modal it does not populate the video. Here is code i have tried.
<body>
<div>
<script height="433px" width="770px" src="http://player.ooyala.com/iframe.js#ec=x0bjlycjpE7-g-D_2ZMGTcpUDGwEamhd&pbid=4441ed2a84e74b66b60ce980f20deb84"></script>
</div>
<div class="modal" id="category_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content about_us">
<div class="modal-body">
<script height="433px" width="770px" src="http://player.ooyala.com/iframe.js#ec=x0bjlycjpE7-g-D_2ZMGTcpUDGwEamhd&pbid=4441ed2a84e74b66b60ce980f20deb84"></script>
</div>
</div>
</div>
</div>
</body>
In the above code the 1st script load the video, but the 2nd script does not load the video. Is there any one who can suggest me what to do?
Does Ooyala have a javascript api? Sorry -- I am unfamiliar with this, but I think it does. I found this code snippet that someone has used within fancybox:
'beforeShow': function() {
var videoPlayer = OO.Player.create('playerwrapper', 'R0ZjB2NTqDw3YRWba9RIpRnF6D9lRYKP', {});
console.log(videoPlayer);
videoPlayer.play();
},
Note that 'beforeShow' is a fancybox callback function and your modal solution may have something different to use. Anyways typically loading in html for videos does not work in modal or lightbox type windows. And often javascript implementations need to be used after the modal is displayed to show the content.
I would try exploring this path.