CODEWITHSUNDEEP
javascriptjqueryhtmlcssbutton
payal_suthar
payal_suthar

Reputation: 455

Is there any way to hide a button but retain its functionality

I have a button on navigation bar which when clicked, displays a dialog box.I want to keep this button invisible and whenever anyone clicks at the place where the button is placed it should open a dialog box i.e. it should remain fully functional even if it is invisible.I have tried visibility:hidden and display:none but nothing seems to provide me the desired result.Here is the fiddle - https://jsfiddle.net/payalsuthar/58bw712t/5/ I want to hide the button in this fiddle and if i click at the place where the button is placed it should display the dialog box. Thanks in advance.

Upvotes: 1

Views: 1140

Answers (8)

Mowgli
Mowgli

Reputation: 129

#clickMe{
    opacity: 0;
}

This may help you.

Upvotes: 0

Venu Madhav
Venu Madhav

Reputation: 433

Try this..

#clickMe{
background-color: transparent;
color: transparent;
border: none;
}

Upvotes: 0

Manish
Manish

Reputation: 247

JS Fiddle

You can use opacity 0 for hidden the button. And it is clickable.

This may help you. Working example is below. 

`https://jsfiddle.net/manishghec/upvsftyq/2/`

Let me know if this works for you.

Upvotes: -2

Pawan Nogariya
Pawan Nogariya

Reputation: 8960

Then instead of button use div and have onclick event defined for that div. Since div will have no content, it will be like invisible and still be clickable.

<div id="clickMe" style="width:50px;height:50px"></div>

Upvotes: 0

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try below code:

#clickMe{
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* Netscape */
  -moz-opacity: 0;
  /* Safari 1.x */
  -khtml-opacity: 0;
  /* Good browsers */
  opacity: 0;
}

Working demo

Upvotes: 0

dee
dee

Reputation: 121

How about this?

https://jsfiddle.net/58bw712t/12/

make the appearance none

#clickMe{
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
   border: none;
   background: none;
   width : 100px;
   height: 100px;
}

Upvotes: 0

vijayP
vijayP

Reputation: 11502

Create a blank label instead of button and you can achieve it like follows:

https://jsfiddle.net/58bw712t/10/

<lable id="clickMe">&nbsp;&nbsp;&nbsp;&nbsp;</lable>

$('#clickMe').click(function() {
  $('#dialog1').dialog({
    buttons: {
      "yes": function() {
        $(this).dialog('close');
      },
      "no": function() {
        $(this).dialog('close');
      }
    }
  });

});

Upvotes: 0

apscience
apscience

Reputation: 7253

In that case, you can use opacity: 0

Upvotes: 4

Related Questions