Responsive Modal popup

Andy Green
Andy Green used Ask the Experts™
on
Hi

I have a modal popup that gets opened:

oWnd.maximize();
oWnd.set_modal(true);

This works ok and takes up the full screen over the current page, its used for adding / removing items on the main page.

I need to retain this look for mobile devices, but on a pc screen I'd like to set a max width, of at least about 786 (tablet). The pages do use Bootstrap, so those classes are available

Can anyone help?

Andy
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Marco GasiFreelancer
Top Expert 2010

Commented:
You could use media queries:
@media (min-width: 768px){
    #my-modal{
         max-width: 768px;
    }
}

Open in new window

This will set the modal's (with id my-modal) max-width to 768px for all devices with a screen width >= 768px
If you could post here your code maybe we can help you better...
Using Bootstrap modal you need to add .modal-dialog class

@media screen and (min-width: 768px) {
	
	#myModal .modal-dialog {width:768px;}

}

Open in new window

Top Expert 2015
Commented:
A jsfiddle example of creating a responsive modal dialog that has a max-width of 768px using Bootstrap.
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

Author

Commented:
Thanks all, I may not have phrased my question properly - I'm using window.open this opens a new window with my page.

Cant see where to assign the classes in this scenario.

Andy
Top Expert 2015
Commented:
window.open is a completely different situation. You can control the size of the new window by adding the necessary parameters. You cannot assign classes to the window but you can to the content just like any other page.

That being said, the Bootstrap modal popup suggested would be a much better way to present a form for the user to add / remove items from the parent page. Spawning new windows for this purpose is an obsolete method and you can run into problems with pop up blockers.

Author

Commented:
Thanks Guys.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial