I have a modal where the content of the modal is longer than the modal height so there is a scrollbar
The content of the modal is a survey. If the survey is not taken then the modal opens at the top of the survey
But if the survey has been taken and a person comes back to change their answers the modal opens at the bottom of the survey and people often do not realize they are at the bottom of the survey, not the top
How to open the modal so it opens at the top of the modal content regardless of whether the survey has been taken or not
Is there a way to do this with CSS?
Thank you
I think you can't solve it with css.
But which language do you use?
If you use something like React, that means your programming language is JavaScript, you can use this:
window.scroll(0, 0);
If you set it up at the top of your modal, every time you open it, it starts at the top.
If you use something other language, I think you find a similar code-example.
Related
I was wondering if there was a way to get the nz-popover to center on another element.
I basically have a text input followed by two buttons in a div, I would like to center the popover on the div rather than on the button that triggers it.
I found that i could add the popover to the actual div and then use the nzVisible to trigger it but then i loose the ability to close the popup when the user leaves the area (prob when they hover over the mask or click it). I tried many ways to close it once the popover looses focus etc but that would cause the popover to close if the popover contains a menu or datepicker (when they are used).
Anyone got any ideas? (i used to use angular material and i believe they had something similar (think it was called target or something).
Thanks in advance,
For anyone who is interested in this, we have submitted a PR to provide this feature. You would be able to use this in 9.x (and future) versions.
I'm a novice / beginner and I am trying to create a html page that has images that when you click on them, a text box pops up and provides information. The text is about 150 - 200 words and I want the pop up boxes to be responsive.
After a lot of time spent on this, the best solution I found (at my beginner level) was to use a modal box with scroll bars (due to the amount of text to read). I have used this code / guide:
http://www.w3schools.com/howto/howto_css_modals.asp
and I amended line 8 in the code from absolute to relative because the original version does not allow the scroll bars to scroll to the bottom to read the text fully when I used the code and tried it for myself.
.modal {
display: none; /* Hidden by default */
position: relative; /* Stay in place */
I have uploaded a version here with the slight amendment.
http://sugastore.com/test/modal-textbox.html
However, I want to have multiple modal text boxes on the same html page and I do not know how to do this. I have been reading online and the information about numbered div ID's but the information has been too advanced for me to understand.
My question is:
Q1. How can I use this modal code to create multiple modal boxes on one page? (and for them to be responsive)
Also, but not so important (I am sure I can find a way from reading online, but will ask here as well).
Q2. How do I change the link from a button to an image, so you click on an image and the modal box pops up?
Q3. When I change the modal from absolute to relative (as detailed above) the semi-transparent black background does not fit the whole page, is there a simple fix to amend this?
I also welcome anyone who already has a script / code example for a simple responsive multiple modal text box pop up (upon clicking an image) that is responsive and allows for scrolling to account for a lot of text.
Try this:
Q1: You can use the code to create multiple modals but you have to give them different ID's. eg #myModal, #myModal1, #myModal2 or better still name them according to what they display. They should be responsive as bootstrap modals are designed to be responsive
Q2: Replace the button tags with image tags and give it the ID "myBtn". Clicking on the image should trigger the modal
Q3: Change the relative to fixed. This should solve the problem.
Can you help me out solve this modal with bootstrap I really don't have a clue
a multiple modal in one window
Looking at the screenshot, it seems that it is just one modal.
Within the modal there's multiple tabs, but they don't open a new modal, just show different content.
I am currently working on an AngularJS project for a tablet with the basic navigation through all the different pages. The project consists of all the basic features like Side Navigation Menu, a Header, the links of different pages, and a Footer.
The project is also created responsively using Bootstrap. I am not facing any responsiveness issue in all the elements created in the project except one.
When keyboard opens, the responsiveness gets disturbed.
Basically, the header div position gets distorted, the footer shifts above and gets placed right above the keyboard opened, and the side-navigation width also gets disturbed.
I tried the following things -
Used position: fixed, position: relative but nothing changed.
Looked into many different SO question links but got no fruitful result.
I have one option (hack) left that is stated in this SO answer given by Roberrrt but that's a long process and I'm short on time and doubt if it will be a positive hack.
Any help would be hugely appreciated.
Update :-
Giving an idea of how the structure of my project is -
This is the main page where a search box that is in-built in DataTables is used. The Header, Footer and Side-Navigation Burger Menu Button are as described here.
When clicked on the Burger menu, the side-nav opens in full-width as shown below -
Now on clicking the search box the following screen shows with all the elements distorted and responsiveness screwed -
For reference purpose, The theme that I'm working on is Inspinia
I am using AJAX modal popup in my project, but there is problem with it.
Now I decided to acheive similar behaviour using javascript
I am able to show popup using
document.getElementById('dv').style.display = "block";
Now I just need, how can I make background disable like in modal popup?
you create a div that spans the whole page but initial style is display:none; along with any other styles. i.e transparency 80% with background colour of black..
When you show dv change the display attribute of the div (above). Just make sure that the dv has a higher z-index than the background div and the background div has a higher z-index than the content on the page :)
Have you considered using a library for this? The most programmer-friendly and flexible I have found is NyroModal (jQuery based). The advantage of a library is it will deal with many subtle things that happen with modal dialogs, e.g. ensuring it works effectively across all browsers (and overcomes the various quirks around things like positioning), animating on and off, lightbox effect around it.
NyroModal lets you generate dialogs dynamically, whereas most libraries are geared owards simpler use cases such as "make all images clickable so they show up as lightboxed when the user clicks on them".