Highlighted

Popups

New Here ,
Sep 26, 2018

Copy link to clipboard

Copied

I have a client that needs a jpg to popup on the home page five seconds after it loads. Anyone have suggested code I can use to accomplish this? Dreamweaver CC 2018.

Any good with code? You can use the setTimeOut function in javascript - example below will provide you a solution:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Pop Up</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.pop_up').hide();

setTimeout(function(){

$('.pop_up').fadeIn();

}, 5000);

$('.close_pop_up').css('cursor' , 'pointer').click(function(){

$('.pop_up').fadeOut();

});

});

</script>

<style>

body {

margin: 0;

}

.pop_up {

position: fixed;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);)

}

.pop_up_content {

width: 300px;

margin: 0 auto;

text-align: center;

padding: 25px;

background-color: #fff;

position: relative;

top: 50%;

transform: translateY(-50%);

}

</style>

</head>

<body>

<div class="pop_up">

<div class="pop_up_content">

<h1>Pop Up</h1>

<button class="close_pop_up">Close</button>

</div>

<!-- endpop_up_content -->

</div>

<!-- end pop_up -->

</body>

</html>

Views

199

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Popups

New Here ,
Sep 26, 2018

Copy link to clipboard

Copied

I have a client that needs a jpg to popup on the home page five seconds after it loads. Anyone have suggested code I can use to accomplish this? Dreamweaver CC 2018.

Any good with code? You can use the setTimeOut function in javascript - example below will provide you a solution:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Pop Up</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.pop_up').hide();

setTimeout(function(){

$('.pop_up').fadeIn();

}, 5000);

$('.close_pop_up').css('cursor' , 'pointer').click(function(){

$('.pop_up').fadeOut();

});

});

</script>

<style>

body {

margin: 0;

}

.pop_up {

position: fixed;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);)

}

.pop_up_content {

width: 300px;

margin: 0 auto;

text-align: center;

padding: 25px;

background-color: #fff;

position: relative;

top: 50%;

transform: translateY(-50%);

}

</style>

</head>

<body>

<div class="pop_up">

<div class="pop_up_content">

<h1>Pop Up</h1>

<button class="close_pop_up">Close</button>

</div>

<!-- endpop_up_content -->

</div>

<!-- end pop_up -->

</body>

</html>

Views

200

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 26, 2018 0
LEGEND ,
Sep 26, 2018

Copy link to clipboard

Copied

Any good with code? You can use the setTimeOut function in javascript - example below will provide you a solution:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Pop Up</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.pop_up').hide();

setTimeout(function(){

$('.pop_up').fadeIn();

}, 5000);

$('.close_pop_up').css('cursor' , 'pointer').click(function(){

$('.pop_up').fadeOut();

});

});

</script>

<style>

body {

margin: 0;

}

.pop_up {

position: fixed;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);)

}

.pop_up_content {

width: 300px;

margin: 0 auto;

text-align: center;

padding: 25px;

background-color: #fff;

position: relative;

top: 50%;

transform: translateY(-50%);

}

</style>

</head>

<body>

<div class="pop_up">

<div class="pop_up_content">

<h1>Pop Up</h1>

<button class="close_pop_up">Close</button>

</div>

<!-- endpop_up_content -->

</div>

<!-- end pop_up -->

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 26, 2018 1
New Here ,
Sep 26, 2018

Copy link to clipboard

Copied

Thank you!

Where do I insert the link for the .jpg to show?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 26, 2018 0
osgood_ LATEST
LEGEND ,
Sep 26, 2018

Copy link to clipboard

Copied

You would insert your image link as below:

<div class="pop_up_content">

<img src="myImage.jpg" alt="">

<button class="close_pop_up">Close</button>

</div>

<!-- endpop_up_content -->

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 26, 2018 0
Adobe Community Professional ,
Sep 26, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 26, 2018 1