Solved

Change properties of a dialog box

Posted on 2016-11-11
1
64 Views
Last Modified: 2016-11-11
$( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },

    });
 
    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );

Open in new window


htmlcode:
<div id="dialog" title="hello" style= "float:left;">
  <p>HI welcome to the website, more text will be here.</p>
</div>
<button id="opener" style="float:right;width:50px;height:50px;"><i class="fa fa-info" aria-hidden="true"></i></button>

Open in new window


How can I make the dialog box bigger in width and change the default orange color to blue?
0
Comment
Question by:Jasmine Ikhreishi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 20

Accepted Solution

by:
Russ Suter earned 500 total points
ID: 41883916
I'm assuming you're using jQuery UI in your above example. It's not completely clear. However, overriding the width and height of the dialog is relatively easy. You just need to inject your own CSS. You'll need to use the !important rule to make it stick.
.ui-dialog
{
  width: 500px !important;
  height: 400px !important;
}

Open in new window

You can alter colors in the same way although jQuery UI offers a number of theme options to handle this more cleanly. Look at http://jqueryui.com/themeroller/ and see if you can create the theme that suits your liking.

Here's a jsfiddle which demonstrates overriding the width and height properties of the dialog control: https://jsfiddle.net/g3hc8p55/
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question