Modal when accessing the site

Question

Modal when accessing the site

Navigation

#1 by (1 votes)

0

Could someone pass me a simple jquery code? I just need a modal (div) to appear when the site is accessed and contains a "close" button.

jquery modal

asked by anonymous 24.08.2017 / 18:03

1 answer

Many zeros in the modal Reports in a web application [closed]

score 1 · Accepted Answer

With jquery

$("#myModal").modal('show');

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
    
    	<div id="myModal" class="modal fade">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title">Modal</h4>
	            </div>
	            <div class="modal-body">
	                <p>Bla bla bla</p>
	                <p class="text-warning"><small>blablabla</small></p>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	            </div>
	        </div>
	    </div>
	</div>

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><divid="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>