Solved

Change properties of a dialog box

Posted on 2016-11-11
1
47 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
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

821 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