Dialog

by support_tint

HTML

<p>
Augue vulputate cursus, lacinia mattis lacinia. Pretium imperdiet mattis, eget porta parturient nascetur at sem magnis cum cubilia taciti. Imperdiet, sapien nullam quis per rhoncus pretium. Eleifend taciti adipiscing nunc class duis imperdiet. Facilisi elit neque ut. Ad montes non quis quisque, pharetra ultricies. Class torquent, vel ultricies velit commodo cursus. Fames ut vitae ornare. Sodales dui cum.
</p>
<p>
Mus accumsan nullam erat litora ipsum, blandit vulputate. Hendrerit volutpat lorem urna, lectus egestas libero? Dapibus fames parturient ut vehicula dolor eros taciti. Per metus egestas scelerisque senectus facilisis primis cursus iaculis porta. Ac hendrerit facilisi habitant arcu justo ligula fames ante platea dictum tellus malesuada. Posuere nunc dolor, phasellus proin blandit vitae. Torquent luctus amet amet ultricies posuere interdum et sit. Mollis curae; congue senectus commodo venenatis pulvinar porta.
</p>
<script async src="https://www.tintup.com/app/dist/tint.js"></script>
<dialog data-team-id="360919" data-form-id="1499"></dialog>
<button class="styled-button">Learn More</button>
<p>
Dis mi maecenas varius sociosqu. Montes nec rutrum luctus inceptos purus. Dapibus commodo netus, ullamcorper sociosqu facilisi nec nisl interdum. Inceptos ornare mattis porttitor per nulla leo porta natoque fusce nibh lobortis. Morbi nisi blandit sociosqu feugiat adipiscing nisi nostra. Egestas fermentum ad nibh diam magnis nec donec. Condimentum; et sed tristique tristique cras. Curabitur laoreet adipiscing libero malesuada. Facilisis, posuere semper blandit. Natoque hendrerit morbi ante egestas, vitae maecenas. Magnis viverra aliquet magna.
</p>
<p>
Quam tempus ultrices iaculis nibh luctus dignissim lorem curae; mollis phasellus. Consectetur curabitur vehicula pharetra. Dis elit praesent suspendisse mauris egestas, neque ligula lacus gravida inceptos aliquam. Ac aliquet aliquam ultricies sem. Massa amet varius ultricies ultrices maecenas leo. Suscipit...

CSS

dialog[data-team-id="360919"][data-form-id="1499"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the dialog */
  width: 90%; /* Take up 90% of the viewport width */
  max-width: 400px; /* Maximum width for larger screens */
  height: auto; /* Automatically adjust height */
  max-height: 90vh; /* Prevent it from exceeding 90% of the viewport height */
  padding: 20px; /* Inner spacing */
  border: 2px solid #ccc; /* Border around the dialog */
  border-radius: 8px; /* Rounded corners */
  background: #fff; /* White background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
  overflow-y: auto; /* Enable vertical scrolling for large content */
  z-index: 1000; /* Ensure it's above other content */
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5); /* Dimmed background */
  z-index: 999; /* Behind the dialog */
}


button {
  background-color: #ffc107; /* Matching the yellow color */
  color: #000; /* Black text */
  border: none; /* No border */
  padding: 10px 20px; /* Adjust padding for size */
  font-size: 16px; /* Font size for readability */
  font-weight: bold; /* Bold text */
  text-transform: uppercase; /* Capitalized text */
  cursor: pointer; /* Pointer on hover */
  border-radius: 4px; /* Rounded corners */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

button:hover {
  background-color: #e0a800; /* Darker yellow on hover */
}

JavaScript

const dialog = document.querySelector('dialog[data-team-id="360919"][data-form-id="1499"]');
const button = document.querySelector('button');

document.querySelector('button').onclick = event => {
  if (dialog.open) {
    event.target.innerText = 'Learn more';
    dialog.close();
  } else {
    event.target.innerText = 'Close form';
    dialog.show();
  }
};