Я маю div з класом .popup. У мене є iFrame, який використовується для відкриття іншої галереї зображень, але коли я показую спливаюче вікно за допомогою jQuery, він не відцентрований і знаходиться вгорі елементом сторінки.
CSS
.popup {
border: 1px solid #ccc;
width:inherit;
border-radius: 7px;
margin-right: auto;
margin-left:auto;
padding: 20px;
position:absolute;
z-index: 1000;
background-color: #f0f0f0;
height:400px;
}
HTML
<div class="popup " style="display: none">
<div class="col-lg-12" style="padding-bottom: 10px;">
<input onclick="SelectImage(inputImage)" class="btn btn-xs btn-success pull-left" type="button" value=" بازگشت " />
<input id="btnImageSelect" onclick="SelectImage(inputImage)" class="btn btn-xs btn-success" type="button" value="تایید عکس" />
</div>
<iframe id="iframeImage" src="../filemanager/ImagePicker.aspx" width="100%" height="320" frameborder="1"></iframe>
</div>
Як виправити цю проблему та де мій загублений код?
Відповіді:
0 для відповіді № 1$(document).ready(function(){
var width = $(.popup).width();
var height = $(.popup).height();
$(".popup").css({"top":"50%", "left":"50%", "margin-top":height/2+"px", margin-left:width/2+"px"});
});
Це перемістить div в центрі.
0 для відповіді № 2
Я не впевнений, що ви шукаєте width: inherit. Це завжди зробить ваше спливаюче вікно таким же широким, як його батьківський елемент, тому немає необхідності в центруванні position: absoluteоднак, ваше спливаюче вікно буде розташоване відповідно до body елемент вашої сторінки або батьківський елемент з position: relative.
Ось що я міг би зробити, якщо правильно зрозумів вашу проблему:
Я припускаю width тут невідомо.
.popup {
...
position: absolute;
margin: 0;
left: 50%;
transform: translateX(-50%);
}
Ось скрипка: http://jsfiddle.net/ugys4znt/
Якщо ви хочете, щоб спливаюче вікно залишалось на екрані, навіть коли користувач прокручує, використовуйте position: fixed.
Будь ласка, вкажіть ще, чого ви намагаєтесь досягти width: inherit, і я зв’яжусь з вами.