How to create custom pop-ups in html?

Question

I want to create custom beautiful pop-ups for my code

Answer 1

🎃#H P 22™🎃 Please be reminded that downvote abuse is against our guidelines.

Answer 2

https://code.sololearn.com/WEVFA7XzvUmK/?ref=app

Search sweetalerts2.github

Answer 3

You can create your own by using HTML and CSS
Or use library like sweetalert.js

https://code.sololearn.com/Wt5p4O33LVUA/?ref=app
https://code.sololearn.com/WguJrVB7EUMk/?ref=app

Answer 4

You will have to design it yourself with css. Also javascript will be needed to trigger it

Answer 5

Beginner friendly may help you
https://code.sololearn.com/We75g9TtAx4x/?ref=app

Answer 6

In html5 there's no need to use additional tools. You may use new element named "dialog". If you want to make your web page cross-browser, then there are polyfills for this!

Enjoy using that element!

Answer 7

The easiest way to create popups is to use bootstrap, it'll save a lot of energy. CSS/JS is not necessary. Input bootstrap library ref. link in the head and add the code in body:
<!-- Trigger the popup with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
If you need help on the boostrap library link , contact me. I hope I've been able to profer suitable solution.

Answer 8

How to replace a scroll up button in a html website with something fancy like a super hero or a rocket that goes to the top of the website from the bottom???

Answer 9

check this.
https://code.sololearn.com/WdvSI1cN8OP9/?ref=app

Answer 10

You can start looking for simple popup from here :
https://www.w3schools.com/howto/howto_js_popup.asp

Or you can directly go for advanced popup :
https://freshdesignweb.com/jquery-javascript-popup-window/

Answer 11

Hello,
Here is full code for custom pop-up. Follow few easy steps to create your own pop-up:

Step 1: Include jQuery file inside head tag

<script src="jquery-1.js" type="text/javascript"></script>
Step 2: Add pop-up HTML inside body tag

<button class="popup">Click to open popup</button>
<div style="display: none;" class="pop-outer">
<div class="pop-inner">
<button class="close">X</button>
<h2>Pop-up title goes here.</h2>
<p>Pop-up content goes here.</p>
</div>
</div>
Step 3: Add CSS style inside head tag

<style>
.pop-outer {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pop-inner {
background-color: #fff;
width: 500px;
height: 300px;
padding: 25px;
margin: 15% auto;
}
</style>
Step 4: Add jQuery code inside head tag

<script>
$(document).ready(function (){
$(".popup").click(function (){
$(".pop-outer").fadeIn("slow");
});
$(".close").click(function (){
$(".pop-outer").fadeOut("slow");
});
});
</script>