I have an angular/bootstrap app and the modal window of an app contains small textarea which can contain a lot of text that does not fit the size of textarea (and modal).
I would like to add some kind of button to the small modal window which would open new bigger popup/modal containing nicely formatted content of text area, like 90% of the screen.
I am not asking here for the code, but more like for the way how to approach the problem. I have already tried several approaches but I got stuck always.
Thanks a lot!
I would just use JavaScript to handle the click of your button to expand the modal size, by adding a class to your modal.
e.g. jQuery example:
$('.expand-modal').click(function() {
$('.modal').addClass('expanded');
});
And then just write some CSS for .modal.expanded where you ensure it's 90% of the screen size or whatever you want.
You would probably want another button to minimise the modal again, in which case you just do something like $('.modal').removeClass('expanded');
Related
It shows me a simple Alert Box when I use this
<button onclick="alert('AlertBox')">Click Me</button>
But is their any way to have an alert box, with extra bg color and some extra effect look?
use Sweet Alert
Or Make div with fixed position display none, and in javascript when you click on botton change div display to block
Here is the detailed example of Designed Alert Box with help of Sweet Alerts
http://javainfinite.com/html/custom-designed-alerts/
The javascript alert() is a system message box that will will block your page whilst it displays and will look different on different operating systems.
What you are looking for is usually referred to as a dialog box or modal popup, these are constructed using html and javascript to look like the page behind is blocked or greyed out.
If you are starting out, you could look at some examples like:
https://www.w3schools.com/howto/howto_css_modals.asp
These are build from scratch.
Or you could look at using a css librarly like BootStrap which will have these components and other components to help style your website or application.
eg: https://getbootstrap.com/docs/4.3/components/modal/
I have 140 link items that essentially are going to do a modal window of a user profile for each link. I have created a div(the modal window) and styled it but the problem is that the elements on each user profile have to be different. So there is a div containing 3 images which are going to be different for everyone, a profile picture, a paragraph of text and social icons.
What would be the easiest way to make this work? Been looking for some information for couple of hours with no results.
Thank you.
Create a single blank modal (yes, one will do).
Everytime you display content to it, clear the body of the modal first
Load the content you want to display
Show the modal.
Do steps 2 to 4 everytime you want to show it with different content.
Ok, so I've got a pop up window from Javascript. However, this window has dynamically generated content - a person could add dozens of entries, which would fill the box, but because the box is frequently generated with little content in it, it does not naturally have a scrollbar.
How would I add a test in Javascript to make sure that everytime this script runs, a test to see if a scrollbar should be implemented is run, and then how would I implement the scrollbar?
window.open ("http://www.javascript-coder.com", "mywindow","scrollbars=1");
Or, you may be able to take this into the hands of CSS:
In the popup:
body {overflow-y:auto !important};
,
HI,
I need some ones help with this, thank you in advance.
In my site i have that when the user clicks on a input box then a new div opens up on top of the input box in that exact place.
Now i need to add that when that div opens i need the background of the hole screen to become black with some opacity, i think it is called overlay.
some thing like i want you can find here:
http://www.omnipotent.net/jquery.sparkline/
if you hover with the mouse over the div on the side that says "come work at splunk".
How can i do something like that with jquery or any thing else.
Thank you very much
You want to use the jQuery UI Dialog Modal.
Edit: jQuery's Dialog method will give you a similar effect but is usually used for onclick events rather than mouseover/mouseout. Have a look at the javascript code on the page you linked (around line 356) and you'll see:
$('#splunkjobs').mouseenter(function() {
// make element absolute, positioned over the top of the float and resize
$('<div id="shade"></div>').
appendTo('body').
css('height', $(document).height()).
animate({opacity: 0.6});
This essentially creates a that covers the page and then fades it in.
I still think using a Dialog for your button is preferred (and much simpler).
this is caled 'modal', you can use jquery:
http://jqueryui.com/demos/dialog/#modal
http://www.queness.com/resources/html/modal/jquery-modal-window.html
http://dev.iceburg.net/jquery/jqModal/#examples
or if you still need more:
http://coderplus.com/2009/11/jquery-modal-boxes-to-improve-your-ui/
I have a modal dialog form which has some "help links" within it which should open other non-modal panels or dialogs on top of it (while keeping the main dialog otherwise modal).
However, these always end up behind the mask. YUI seems to be recognizing the highest z-index out there and setting the mask and modal dialog to be higher than that.
If i wait to panel-ize the help content, then i can set those to have a higher z-index. So far, so good. The problem then is that fields within the secondary, non-modal dialogs are unfocusable. The modal dialog beneath them seems to somehow be preventing the focus from going to anything not in the initial, modal dialog.
It would also be acceptable if i could do this "dialog group modality" with jQuery, if YUI simply won't allow this.
Help!
By default, YUI manages the z-index of anything that extends YAHOO.widget.Overlay and uses an overlay panel. It does this through the YAHOO.widget.Overlay's "bringToTop" method. You can turn this off by simply changing the "bringToTop" method to be an empty function:
YAHOO.widget.Overlay.prototype.bringToTop = function() { };
That code would turn it off for good and you could just put this at the bottom of the container.js file. I find that approach to be a little bit too much of a sledge hammer approach, so we extend the YUI classes and after calling "super.constuctor" write:
this.bringToTop = function() { };
If you do this, you are essentially telling YUI that you will manage the z-indices of your elements yourself. That's probably fine, but something to consider before doing it.
The original dialog can't be modal if the user is supposed to interact with other elements—that's the definition of modal. Does the original dialog really need to be modal at all? If so, have you tried toggling the modal property of the original dialog before you open the other elements?