0

Recently, I found stackoverflow's recent achievements awesome, when click SO header's icon with title called "Recent achievements: reputation, badges, and privileges earned", I got a special dialog:

enter image description here

I tried Bootstrap modal-dialog, and had some questions:

(1) this modal-dialog will be placed in some specific place randomly, but I hope it sit next to the icon like SO's, and I found SO used the fixed position:

style="top: 34px; left: 190.21875px; display: block;"

I don't know whether top: 34px; left: 190.21875px; is set during the designing, or some other way?

(2) when I launch a modal-dialog, at the same time, it will change the body's colour like generating a layer of shadow until it is closed, such as here, how should I do for no changing the body's color?

Updated:

I tried to use Bootstrap's nav, dropdown and dropdown-menu to build a test version: http://jsfiddle.net/j9334pbr/. If you have any better resolution, please tell me!

1 Answer 1

0

It sounds like you do not want the shaded cover over the whole page when the modal is open. If so there is a reason to have this, if the user clicks anywhere on the page the modal will go behind the open window. It uses a z-index to layer the page with just a shade look. The quick way to use css to make it look different but almost what you want to do is to use this css and make sure you place it at the end/below of any bootstrap css links.

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

If you open a bootstrap non min css file and go to line 5726 this is where the classes for the modal starts. This is in version v3.3.4 .

You can place a button any where to open the madal. I hope that helps and gets you started. Good luck.

2
  • Thank you! I can not do anything after using your snippet launching modal May 26, 2015 at 1:04
  • You will need to use the class .modal-backdrop to may be change the background -color to a clear transparent shade. Something you may want to consider.
    – AngularJR
    May 26, 2015 at 1:57

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.