如何使对话框响应? [英] How to make dialog box responsive ?
问题描述
我在目标网页上创建了一个对话框,当页面加载一次时弹出窗口,但我无法使其响应。我尝试设置min-width和max-width,但这无济于事。我该怎么办?
我的尝试:
< pre lang =CSS># mask {
position : 绝对;
left : 0;
top : 0;
z-index : 9000;
background-color : #000;
display : none;
}
# boxes 。窗口 {
position : 绝对;
left : 0;
top : 0;
width : 440px;
height : 200px;
display : 无;
z-index : 9999;
padding : 20px;
border-radius : 15px;
text-align : < span class =code-keyword> center;
}
# box #对话框 {
width : 750px;
height : 300px;
padding : 10px;
background-color : #ffffff;
font-family : 'Segoe UI Light',sans-serif;
font-size : 15pt;
}
# popupfoot {
font-size : 16pt;
position : 绝对值;
bottom : 0px;
width : 250px;
left : 250px;
}
//这是Jquery。
$( document )。ready( function (){
// 如果未设置cookie hasLaunch,则显示模态窗口
if (!readCookie(' hasLaunch')){
// 启动它
launchWindow(' #dialog');
// 然后设置cookie,以便下次模态不会再次显示。
createCookie(' hasLaunch', 1 , 1 );
}
// 如果关闭按钮单击
$(' 。window .close')。click( function (e){
// 取消链接行为
e.preventDefault();
$(' #mask')。hide();
$(' .window')。hide();
});
});
function createCookie(name,value,days){
if (天){
var date = new 日期跨度>();
date.setTime(date.getTime()+(days * 24 * 60 * 60 * 1000));
var expires = ; expires = 跨度> + date.toGMTString();
}
else var expires = ;
document .cookie = name + = + value + expires + ; path = /;
}
function readCookie(name){
var nameEQ = name + =;
var ca = document .cookie.split(' ;');
for ( var i = 0 ; i< ca.length; i ++){
var c = ca [i];
while (c.charAt( 0 )== ' ')c = c.substring( 1 ,c.length);
if (c.indexOf(nameEQ)== 0 ) return c.substring(nameEQ.length,c.length);
}
返回 null ;
}
function launchWindow(id){
// 获取屏幕高度和宽度
var maskHeight = $( document )。height();
var maskWidth = $( window )。width();
// 设置高度和宽度以屏蔽以填满整个屏幕
$(' #mask')。css({' width':maskWidth,' 高度跨度>:maskHeight});
// 过渡效果
$(' #mask')。fadeIn( 500 );
$(' #mask')。fadeTo( slow, 0 。 9 跨度>);
// 获取窗口高度和宽度
var winH = $( window )。height();
var winW = $( window )。width();
// 将弹出窗口设置为中心
$( id).css(' top',winH / 2 - $(id).height()/ 2);
$(id).css(' left',winW / 2 - $(id ).WIDTH()/ 2);
// 过渡效果
$(id).fadeIn ( 2000 );
}
//这是html代码
< div id = box >
< div id = 对话框 class = window >
欢迎来到GospelBox!
< div < span class =code-attribute> id = popupfoot > < a href = / content /about.html\"> 好的< / a > | < a class = 关闭 样式 = color:red; href < span class =code-keyword> = # > 跳过此步骤< / a > < / div >
< / div >
< div id = mask > < / div >
< / div >
( document )。ready( function (){
// 如果未设置cookie hasLaunch,则显示模态窗口
if (!readCookie(' hasLaunch' )){
// 启动它
launchWindow(' #dialog');
// 然后设置cookie,以便下次模态不会再次显示。
createCookie(' hasLaunch', 1 , 1 );
}
// 如果关闭按钮单击
(' 。window .close')。click( function (e){
// 取消链接行为
e.preventDefault();
(' #mask')。hide();
I created a dialog-box on my landing page that pop-ups when the page loads only once, but i am not able to make it responsive. I tried setting min-width and max-width but that won't help. What should i try?
What I have tried:
#mask {
position: absolute;
left: 0;
top: 0;
z-index: 9000;
background-color: #000;
display: none;
}
#boxes .window {
position: absolute;
left: 0;
top: 0;
width: 440px;
height: 200px;
display: none;
z-index: 9999;
padding: 20px;
border-radius: 15px;
text-align: center;
}
#boxes #dialog {
width: 750px;
height: 300px;
padding: 10px;
background-color: #ffffff;
font-family: 'Segoe UI Light', sans-serif;
font-size: 15pt;
}
#popupfoot {
font-size: 16pt;
position: absolute;
bottom: 0px;
width: 250px;
left: 250px;
}
// This is Jquery.
$(document).ready(function() {
//if the cookie hasLaunch is not set, then show the modal window
if (!readCookie('hasLaunch')) {
//launch it
launchWindow('#dialog');
//then set the cookie, so next time the modal won't be displaying again.
createCookie('hasLaunch', 1, 1);
}
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
});
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function launchWindow(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
}
// this is html code
<div id="boxes">
<div id="dialog" class="window">
Welcome to GospelBox!!!
<div id="popupfoot"> <a href="/content/about.html"> Okay </a> | <a class="close" style="color:red;" href="#" >Skip this step </a> </div>
</div>
<div id="mask"></div>
</div>
(document).ready(function() { //if the cookie hasLaunch is not set, then show the modal window if (!readCookie('hasLaunch')) { //launch it launchWindow('#dialog'); //then set the cookie, so next time the modal won't be displaying again. createCookie('hasLaunch', 1, 1); } //if close button is clicked
('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault();
('#mask').hide();
这篇关于如何使对话框响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!