4

How to implement the custom image instead of jquery dialog buttons ? There is standard buttons are there but i have designed new buttons using photoshop with extesion of .png. So i would like to use .png button instead of jquery dialog button.

I hope there is options through css , but if you give me small example, it will be very help to me.

jQuery("#dialog-form").dialog ({ 
 autoOpen: false,
  height: 600,
  width: 700,
  modal: true,
  resizable: false,
  draggable: false, 
  buttons : {
    "Search" : function() { // dialog button need to be customize.

3 Answers 3

4

Try this one? DEMO http://jsfiddle.net/yeyene/GnpQ8/2/

Create a custom close button.

$(document).ready(function(){
    $("#dialog-model").dialog({
        create: function (event, ui) {
            $('.ui-dialog-titlebar').css({'background':'none','border':'none'});
            $(".ui-dialog-titlebar").html('<a href="#" role="button"><span class="myCloseIcon">close</span></a>');
            $("#dialog-model").css({ 'font-family': 'Helvetica', 'padding': '0', 'font-size': '12px' });
        },
        width: 250,
        height: 150,       
        modal: true,
        resizable: false
    });

    $("span.myCloseIcon").click(function() {
        $( "#dialog-model" ).dialog( "close" );
    });
});    
Sign up to request clarification or add additional context in comments.

Comments

0

.button-class { Background; url('yourimage.png');

}

1 Comment

I have 4 buttons inside jquery dialog , so this button class going to be reflect which button ? how to specify the each button ?
0

Remove the below code from your page DEMO

   <script src="js/development-bundle/ui/jquery.ui.button.js">
   <script>
    $(function() {
    $( "input[type=submit], a,button" )
    .button()       
                });
   </script>

and then use your customized button like normal css

5 Comments

I'm using jquery button like buttons : { "search" : function() { }..updated in question section.
u mean popup window button
<input value="Hello" type="button" id="popup" class="classname"> put your css class name here
Like that u can add your image .classname { border: none; background: url('/forms/demo.png') no-repeat top left; padding: 2px 8px; }
No buddy , I asking with in dialog box there is search button - this need to be customize.not open dialog link.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.