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.
Related
I have a HTML code:
<div class="container">
<div class="row">
#foreach(var post in Model)
{
<div class="col-sm-8">
<div class="row">
<div class="post-body container shadow p-3 mb-3 rounded-3">
<h2>#post.Title</h2>
<p>#post.Description</p>
<button type="button" class="show-post-btn btn btn-secondary" data-bs-toggle="modal" data-bs-target="#wholePost" onclick="return showContent()">Show post...</button>
</div>
<div class="modal fade" id="wholePost">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#post.Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>#post.Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar col-sm-4">
col2
</div>
}
</div>
I want to make that to when I click on "Show Post" button modal window is open with corresponding content. Currently, if there is two blog posts clicking on button result in displaying content from the first post even If I click on button in the second blog post.
I want to make that when I click on "Show post" in first blog post modal window opens with content from first blog post and when I click on button in the second blog post modal window open with content from second blog post.
I even don't understand where I should make this, in c# code or with javascript. Please provide me theory not a code if you could because I would like to guess on my own how to make this. Sorry in advance if there is post like that already and great thanks for your help.
You could do it on JS but need to propagate HTML with some additional info
just some concept code for example:
<button onclick="showContent(#post.Id);">Show post...</button>
...
<div class="modal fade" id="wholePost_#post.Id">
JS file
function showContent(id){
$("#wholePost_"+id).show();
}
There are probably some more ways to do it.
The way bootstrap modals work is that the data-bs-target attribute in your button needs to have the same id as the modal so that's why it keeps opening the modal for your first element.
What you need to do is give each modal its separate id, so instead of #wholePost id for all of the modals it should be like #wholePost1, #wholePost2, ... .
I am created one project. In which first I made a hover effect on image album but now I want to make an on-click event. I am trying to make this proper but not done.
I'll give the link : http://ihannoveraner.de/servicebieter/profile.html
When Click link then opens REFERENCE page. you can see hover effect on the image. that place I need click on the image and open popup
My Jquery code is:
$('.ref-img').hover(function () {
$('#MyPopup #albums a').html($(this).html());
$("#MyPopup").modal("show");
});
My Html Code:
<div id="albums"><a href="images/our/01.jpg" class="ref-img">
<div class="zoom-i">
<img class="primary" src="images/our/02.jpg">
<div class="popular-overlay">
<strong>Logo Design</strong>
</div>
</div>
<img class="secondary-1" src="images/our/03.jpg">
<img class="secondary-2" src="images/our/04.jpg">
<div class="meta">
album 1
</div>
</a>
</div>
My Modal Is:
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body">
<div id="albums">
<a>
</a>
</div>
</div>
</div>
</div>
</div>
Above I display code. From this code on hover, image is displayed in the model but now I am trying to display modal after I click.
Second, when popup open popular-overlay id is display using opacity 1.
I am trying to build like this
link
You can do this using two ways:
using onClick attribute in an html. onClick="functionName()"
using click function on item class in jquery.
You can see this link for reference:
https://jsfiddle.net/audetwebdesign/rQdZR/
So I have a bunch of modals (like 30) each containing some text and an embedded youtube video, I want to pause or refresh the video(so as to put it back to the beginning before the play button was pressed) whenever its parent modal is closed (either by pressing the close button or clicking out of the modal). I would also prefer to do this to all the modals and videos through the same script rather than having a script for each individual one. I know very very little javascript though, does anyone know it this is possible and if so I would love it if you'd help me out a little :)
This is an example of the modal
<div aria-labelledby="myLargeModalLabel" class="modal fade news6" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="container-fluid">
<span class="glyphicon glyphicon-remove closer" data-dismiss="modal"></span>
<div class="col-md-8 vid">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fcZMO1mjArs?color=white&&rel=0&showinfo=0" allowfullscreen="1"></iframe>
</div>
</div>
<h1>Iraq Update<br><small>- 2003</small></h1>
<p>Edited for SBS world news evening bulletin</p>
</div>
</div>
</div>
</div>
The class news6 on the parent modal is the unique identifier and the other modals have similar names (news3,news4,etc...)
Once again I really appreciate any help with these things :)
I am using a theme made by Start Bootstrap. (http://startbootstrap.com/template-overviews/agency/)
The portfolio section is implemented as a list of Bootstrap modals.
I tried to insert a Google map on the modal body, but it doesn't show on the screen.
My html code for the map is
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
.
.
.
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
.
.
.
<div class="map" id="map-ubnorth" style="height:300px;width:500px;position:absolute;">abc</div>
</div>
</div>
</div>
</div>
</div>
</div>
However, as you can see below, in my browser, the height and width is set to 0, and displays nothing.
Interestingly, when I put the map code outside of the modal, on the main page, it displays the map with the specified height and width.
What am I doing wrong? I thought it was a CSS issue at first, but it doesn't seem like so.
You need to use embed-responsive instead of height and width for your map size.
<div class="embed-responsive embed-responsive-4by3">
<div id="map-ubnorth" class="embed-responsive-item"></div>
</div>
Here is the example: http://a0u.org/map_modal.html
You need to fire the resize event on your map instance when the modal becomes visible:
$('#portfolioModal1').on('shown.bs.modal', function (e) {
// Assuming your map instance is stored in variable 'map'
google.maps.event.trigger(map, 'resize');
});
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>.