7

How to move the jQueryUI close button on the dialog box at the top of the upper...

 3 years ago
source link: https://www.codesd.com/item/how-to-move-the-jqueryui-close-button-on-the-dialog-box-at-the-top-of-the-upper-right-corner.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How to move the jQueryUI close button on the dialog box at the top of the upper right corner?

advertisements

I'm using jQueryUI and have a modal dialog setup. The designer wants the close button to look like this:

Stoof.png

I currently have it set up like this:

XIe09.png

The icon is not quite right, ignore that, I do however want to move it up into that top right corner. I thought I could accomplish it with the following CSS:

.ui-dialog .ui-dialog-titlebar-close {
  border-radius: 17px;
  height: 33px;
  margin: -10px 0 0;
  padding: 1px;
  position: absolute;
  right: -18px;
  top: -24%;
  width: 33px;
  z-index: 9999;
}

However now it looks like this:

f97VZ.png
iowij.png

How do I get it on top of the dialog? I already have a big z-index on it which doesn't work.

Thankyou.


set class ui-dialog css property overflow as visilble. Hope that helps.

Related Articles

How to add a date and time in the upper right corner of a menu?

I'm working on a responsive web design project. I have a problem, namely that I want to add a time and date to the written menu, which is to be in the upper right corner. In part I managed to achieve this effect, but unfortunately when the page chang

Can I absolutely place an item in the upper right corner of a & lt; Td & gt; element?

I have a table and I need the cells to have an element positioned in the upper right corner of each cell. I've read several other questions asking the same thing but none of them seem to fix the problem. One solution I have read say to wrap the insid

Insert a logo in the upper right corner of R

I am getting started with R markdown and I would like to create a new report having our company image logo.png in the upper right corner of each page. Is there a way to code this in the YAML section or need this to be done in a R chunk section?You ca

How to add a cross button in the upper-right corner of the navigation drawer

I have created a navigation drawer,When user click on hamburger icon it opens the drawer. I need to add a close button in drawer. This is what i need to implement. I have tried, bunt unable to add an image on the Drawer Layout. This is my code to add

How to insert a floating button in the upper right corner of the screen in JS

Using only plain javascript, how to insert a button that will always be floating in the top right corner of the window above other elements ? So far I got: var button = document.createElement("Button"); button.innerHTML = "Title"; butt

How to put the button in the upper right corner?

How can i put a button in up-right corner? I was trying a lot of CSS things, but i really can't understand them, and they doesn't work. Can someone tell me something simple and that works? Here is HTML & CSS of my button. HTML: < a href="#&quo

Put the button in the upper right corner inside the div box

I need your help. I can't for the life of me seem to be able to figure as to how to get the [X] button into the top right corner of my custom css box. Here's the result so far: Here's the html: <!DOCTYPE html> <html> <head> <title>

How to design a div with an icon from the upper right corner?

This question already has an answer here: Getting the button into the top right corner inside the div box 2 answers Can anyone help me to design a div with a top right corner icon? I need the coding for this. I herewith attached sample image for your

How do I open and close a Material-UI dialog box in Meteor / React?

I'm trying to have a dialog with a form pop up when the user clicks a button. I pretty much took exactly from the Dialog Material-UI site for how to do this with a button that will be used to open the Dialog and a TextField added in the Dialog. This

How to insert the image in the upper right corner of the panel header using flex?

Anybody help me How to insert the image on right top corner of panel using flex or action script . i used -<mx:Panel x="38.5" y="28" titleIcon="@Embed('image/logo.png')" id="register" width="375" height

How do I adjust the position of the balls in the upper right corner with Foundation?

I am trying to position the bullets to the top right corner of the image but when I do and resize the screen the bullets move position. Here is my code .orbit-bullets { margin: 0 auto 30px auto; overflow: hidden; position: absolute; float:right; bott

css: how to position a sign X in the upper right corner of the img element

Besides, position: relative, and then set right and bottom position? I wanna the close sign positioned top right corner whatever the size of the imgYou can use absolute position on the X sign and set its position with respect to the relatively positi

How to create a triangle shape in the upper right corner of another div to divide by a border

I want to create shape like on this picture: I created triangle shape like on this pic, and set the margins to be in top right angle, but I dont know how to make it look divided from the left div like shown on picture. Do I have to "cut" left di

YTPlayerView: remove the Share button in the upper right corner

I'm using YTPlayerView from the youtube-ios-player-helper library for video playback, but want to hide the share button in the top right corner that comes with it - anyone have a solution? I've circled what I'm talking about here: Solved it by passin

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK