I am using NgbModal model for modal popup(dialog) in angular 6.
I have a parent form with button, when clicked onto that button it opens the popup.
so my requirement is, when modal pops up, the background (parent form) should be editable or clickable.
also when ever modal pops up the background should be in Editable mode.
i have tried data-keyboard="false" data-backdrop="static" properties to make the parent form editable.
but this doesn't work.
<button aria-label="matMenuButton" mat-icon-button (click)="open()">
<mat-icon aria-label="menu" aria-hidden="false">picture_in_picture</mat-icon>
</button>
<div>
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div>
component that opens :
open() {
this.modalRef = this.service.openTest('Test View');
}
openTest(title: string) {
this.modalRef = this.service.open(TestComponent, { size: 'sm' });
}
When ever the modal (dialog) pops up,
the background (parent form) should be editable always.
Related
i want to heading in above and icon list content with this each image...its hide and show images with text..
when click each button.button1 shows button1 images with heading and when i click button2 button1 is hide and show button2 images with content in same palce.this is the codinInitial Image Show/Hide CSS
Button Data Attribute
data-showme|IMAGE-ID-NAME
Dynamic Image Hide/Show JS
i want to heading in above and icon list content with this each image...its hide and show images with text..
when click each button.button1 shows button1 images with heading and when i click button2 button1 is hide and show button2 images with content in same palce.this is the codinf
You can use something like Display: none when the button is click see below example for reference.
HTML Code:
<div id="button-01" style="display: none"> <button onclick="closebutton1()">button-1</button> </div> <div id="button-02" style="display: none"> <button onclick="closebutton2()">button-1</button> </div>
JS Code:
function closebutton1(){ document.getElementById('button-02').style.display = 'none'; document.getElementById('button-01').style.display = 'block'; } function closebutton2(){ document.getElementById('button-02').style.display = ''; document.getElementById('button-01').style.display = 'none'; }
The resize event I created to show my slick sliders' images in my modal is only firing once on the initial width. If I close the modal, manually move the width of the window, and open the modal again, the images aren't resized. Therefore, they don't appear.
HTML:
<section>
<button id='show' onClick='showDialog()'><img src="img./(This is where I put the name of my image).jpg"style="width:100%;max-width: 400px"></button>
<div id='dialog'>
<span>
<div id="mySlickSlider">
<div class="mySlide">
(This is where I included the images in my slick slider)
</div>
</div>
</span>
<button id='close' onClick='closeDialog()'>×</button>
</div>
</section>
JS:
$('#show').on('click', function(e){
$('#mySlickSlider').resize();
});
Since the resize function was not working, I used a timeout function for the different classes that comprised my slick slider and set it to 0 so there was no lag.
$(window).on('click', function () {
setTimeout(function() {
$('.mySlideNav').slick("getSlick").refresh();
$('.mySlide').slick("getSlick").refresh();
},0);
});
I have a link that opens a modal window.
I would like to open the modal window and scroll to a specific DIV inside it.
HTML:
read more
read more
read more
<div class="portfolio-modal modal fade" id="teamMembers" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="container" data-id="teamMemebrScroll1">....</div>
<div class="container" data-id="teamMemebrScroll2">....</div>
<div class="container" data-id="teamMemebrScroll3">....</div>
</div>
JS:
// scroll to team member 2
jQuery(document).ready(function ($) {
$(".teamMemebrScroll2").click(function (event) {
event.preventDefault();
$('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
});
});
The modal opened correctly, but it always scrolling to the top.
In your approach, you are targeting the $('html,body') but you want to scroll to content inside modal when modal open so it should be $('modalselector')
You are trying to create multiple click events which you don't need and can achieve the same result by using BS modal event function by adding addtional data attributes in modal trigger button.
Made some changes in Modal trigger button, added data attribute data-id and no need the click event as you are trying.
read more
read more
read more
and BS modal event function
$('#teamMembers').on('shown.bs.modal', function (e) {
//alert('modal shown');
var id = $(e.relatedTarget).data('id'); // <--fetch modal button data-id when modal shown
});
As you already added data attributes data-id to elements inside modal
<div class="container" data-id="teamMemebrScroll1">....</div>
<div class="container" data-id="teamMemebrScroll2">....</div>
<div class="container" data-id="teamMemebrScroll3">....</div>
So just need to match the modal button data-id with element data-id inside the modal and scroll to it when modal open
$(document).ready(function () {
$('#teamMembers').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id'); // Modal button data-id
var team = $('.container[data-id="' + id + '"]'); // Element data-id with match the Modal button data-id
$(this).animate({ // Modal
scrollTop: team.offset().top // Scroll to the element
}, 1000);
});
});
Fiddle Working Example
If you want to have more control over scrolling using same above approach, way back I found a very small script and it does a little better job. Check the following
Fiddle with Scroll Top plugin
Try to when you open the window, the first thing you do is going to a link.
This link goes to the specific div "teamMembers"
<a href="#TeamMembers" ... />
Use Php on your window like this:
<?php
header('Location: #TeamMembers');
?>
The goal its to have a menu activated by a button.
This menu can have any type of content inside, so it must adapt according to its content.
In this example i have an accordion, but could be just a grid, or a form, since i'm making it as a bootstrap/jquery widget.
The problem is that the menu changes size after opening and closing it several times.
How can i improve it to make it adaptable to content and consistent, regarding that it will accept different contents.
Code
http://jsfiddle.net/fpmsusm5/
Javascript:
var button = $('#button');
var dialog = $('#modal');
button.on('click', function () {
dialog.toggleClass('hide');
dialog.position({
my: "right top",
at: "right-2 bottom",
of: button
});
})
$("#openpanel1").on("click", function () {
var curr_panel = $("#panel1")
curr_panel.toggleClass('show hide');
curr_panel.collapse(curr_panel.hasClass('show') ? 'show' : 'hide');
});
...
/* ensure any open panels are closed before showing selected */
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
HTML:
<div class="pull-right">
<a id="button" class="btn">Settings</a>
</div>
<div id="modal" class="modal hide" style="overflow- y:hidden;width:auto;height:auto;max-height:100%; max-width:100% ">
<div class="modal-body" style="overflow-y:hidden; width:auto; height:auto; max-height:100%; max-width:100%">
<div id="accordion">
<button id="openpanel1" type="button" class="btn" style="width:100%;text-align:left"><i
class="icon-search"></i>Page Information
</button>
<div id="panel1" class="collapse">
<div class="panel-body">
Contents panel 1
</div>
</div>
....
</div>
</div>
</div>
Thanks for your insights.
Every time you position the dialog, it's changing the left property, and that's causing it to resize.
You don't have to reposition it every time you show/hide it, you can just do it once:
var dialog = $('#modal');
dialog.position({
my: "right top",
at: "right-2 bottom",
of: button
});
button.on('click', function () {
dialog.toggleClass('hide');
});
Then it stays the same size. Updated fiddle: http://jsfiddle.net/fpmsusm5/1/
Here is a piece of code that shows an issue I'm having http://jsfiddle.net/XmqgA/
HTML:
<div id="dialogg" style="display:none">
<input type="text" id="textinp" />
</div>
<p>Draggable boxes. Click a clickable box to open a dialog</p>
<div class="draggable ui-sortable">
<div class="dragme" id="clickbox">Clickable box</div>
<div class="dragme">Box</div>
</div>
<br/>
<p>Simple button that opens up a dialog</p>
<button id="click">Click</button>
JS:
$('.draggable').sortable({
connectWith: ".draggable",
items: "> .dragme",
appendTo: "body"
});
$("#click").unbind().bind("click", function () {
$("#dialogg").dialog();
$("#textinp").focus();
});
$("#clickbox").unbind().bind("click", function () {
$("#dialogg").dialog();
$("#textinp").focus();
});
Basically I have a simple button, a draggable/sortable element and a ui-dialog window with a text input field.
Both button and a sort element have an on-click event that opens up a ui-dialog.
Everything works fine except for the fact that when you open a dialog by clicking on the sort element a cursor/caret inside an input box in the ui-dialog won't blink. However in both cases input field will have focus.
Seems like this can be only replicated in Chrome but I couldn't find it among Chrome-only bugs.
Thanks!