Skip to main content
D
diipakchauhan
Participant
July 4, 2019
Answered

how to create a popup form in adobe Dreamweaver??

  • July 4, 2019
  • 4 replies
  • 3589 views

i am a web designer working with many clients one of my client is asked for a pop-form he also send me a reference domain name which is : https://www.southafricapackages.com/  as this url opened a pop-up form displays on homepage with a close button. as i am familiar with adobe Dreamweaver. i want to create it in Adobe Dreamweaver. I have Dreamweaver CS6. IF ANY OPTION AVAILABLE TO CREATE IT KINDLY REPLY TO THIS POST. THANKS .

This topic has been closed for replies.
Correct answer osgood_

diipakchauhan  wrote

i am a web designer working with many clients one of my client is asked for a pop-form he also send me a reference domain name which is : https://www.southafricapackages.com/  as this url opened a pop-up form displays on homepage with a close button. as i am familiar with adobe Dreamweaver. i want to create it in Adobe Dreamweaver. I have Dreamweaver CS6. IF ANY OPTION AVAILABLE TO CREATE IT KINDLY REPLY TO THIS POST. THANKS .

If you just want to echo what your client has sent you as an example of what they want:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Modal Onload</title>

<style>

body {

margin: 0;

font-family: helvetica, sans-serif;

}

.overlay {

opacity: 0;

display: flex;

justify-content: center;

align-items: center;

position: fixed;

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

height: 100vh;

width: 100vw;

transition: all 1s ease;

}

.modal {

position: relative;

width: 50%;

background-color: #fff;

padding: 30px;

text-align: center;

}

.modal h4 {

font-size: 25px;

letter-spacing: 1px;

margin: 0;

padding: 0;

text-transform: uppercase;

font-weight: 400;

}

.close_modal {

position: absolute;

right: 0;

top: 0;

background-color: #ff0000;

color: #fff;

padding: 6px 9px;

cursor: pointer;

}

</style>

</head>

<body>

<div class="overlay">

<div class="modal">

<div class="close_modal">X</div>

<h4>Quick Query</h4>

<p>Your modal contents goes here.</p>

</div>

<!-- end modal -->

</div>

<!-- end overlay -->

<script>

var overlay = document.querySelector('.overlay');

var close_modal = document.querySelector('.close_modal');

setTimeout(function(){

overlay.style.opacity = 1;

},

500);    

close_modal.onclick = function() {

overlay.style.opacity = 0;

}

</script>

</body>

</html>

4 replies

O
osgood_Correct answer
Legend
July 4, 2019

diipakchauhan  wrote

i am a web designer working with many clients one of my client is asked for a pop-form he also send me a reference domain name which is : https://www.southafricapackages.com/  as this url opened a pop-up form displays on homepage with a close button. as i am familiar with adobe Dreamweaver. i want to create it in Adobe Dreamweaver. I have Dreamweaver CS6. IF ANY OPTION AVAILABLE TO CREATE IT KINDLY REPLY TO THIS POST. THANKS .

If you just want to echo what your client has sent you as an example of what they want:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Modal Onload</title>

<style>

body {

margin: 0;

font-family: helvetica, sans-serif;

}

.overlay {

opacity: 0;

display: flex;

justify-content: center;

align-items: center;

position: fixed;

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

height: 100vh;

width: 100vw;

transition: all 1s ease;

}

.modal {

position: relative;

width: 50%;

background-color: #fff;

padding: 30px;

text-align: center;

}

.modal h4 {

font-size: 25px;

letter-spacing: 1px;

margin: 0;

padding: 0;

text-transform: uppercase;

font-weight: 400;

}

.close_modal {

position: absolute;

right: 0;

top: 0;

background-color: #ff0000;

color: #fff;

padding: 6px 9px;

cursor: pointer;

}

</style>

</head>

<body>

<div class="overlay">

<div class="modal">

<div class="close_modal">X</div>

<h4>Quick Query</h4>

<p>Your modal contents goes here.</p>

</div>

<!-- end modal -->

</div>

<!-- end overlay -->

<script>

var overlay = document.querySelector('.overlay');

var close_modal = document.querySelector('.close_modal');

setTimeout(function(){

overlay.style.opacity = 1;

},

500);    

close_modal.onclick = function() {

overlay.style.opacity = 0;

}

</script>

</body>

</html>

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 4, 2019

Dreamweaver CS6 has no modal windows built-in.  You'll need to code it manually or use a plguin like  Fancybox 3 with jQuery library.

https://fancyapps.com/fancybox/3/

Nancy O'Shea— Product User & Community Expert
P
Paul-M
Legend
July 4, 2019

If you're working on a Bootstrap site then look at Bootstrap modals. If there's no framework involved you might want to look at something like this

Paul-M - Community Expert
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
July 4, 2019

Have a look at Using Bootstrap 4 Modals Version 2 - YouTube

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices