POPUP windows, how to create?

Asked

Viewed 281 times

0

How do I stop creating a POPUP window, other than those that open a page on the Internet?
I need one that looks like a DIV, a block of when they access the site it appears before the person login with some information...

With a button to close it too, it would be very useful...

javascript
  • 1

    So I guess what you need is a modal.

  • Is the correct name to pronounce a modal window? Okay. Thank you.

  • I don’t know, look at the link I passed in the comment above and analyze if that’s what you want.

  • 1

    The very one Jquery UI also has modal windows just as there are many other jQuery/Javascript plugins for this

2 answers

1

Young has already taken a look at the bootstrap modals, they are very useful and easy to use.

Here is the link: http://getbootstrap.com/javascript/#modals

About when loading the page you can make a function and call it in the onload of the page:

window.onload = function(){
    abrirModal(); 
}

And here a simple example

inserir a descrição da imagem aqui

  • 1

    The answer is good, but if you put the code as text instead of image is better.

  • Yeah, I saw it later in bootstrap. How do I create the function and call in the onload of the page?

  • Simple inside the onload I passed you there above you will put, $("#myModal"). modal(); (where 'myModal' is your modal ID). And ready it will start the screen, load and open the modal. **Note: To give id to a modal just put the id tag on the first div of the image and look like this (div class ="modal fade" id="myModal"...) **

0

Basically created with CSS.

$(document).ready(function(){
    $(".close").click(function(){
        $("#openModal").hide();
    });
});
	.modalDialog > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="openModal" class="modalDialog">
	<div>
		<a href="#" class="close" title="Close">X</a>
		<h2>Janela Modal</h2>
		<p>Esta é uma simples janela de modal.</p>
		<p>Você pode fazer qualquer coisa aqui, página de Login, pop-ups, ou formulários</p>
	</div>
</div>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.