Solved

Change properties of a dialog box

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

786 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