Tous,html Popup modal
Comment faire un simple pop-up modal pour le code suivant. Et en cliquant sur l'arrière-plan le pop-up modal ne devrait pas disparaître.
<html>
<input type="textarea"></input>
</html>
Merci .........
Voici un exemple simple JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic modal demo</title>
<style type="text/css">
body { margin: 0; }
#shade, #modal { display: none; }
#shade { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; }
#modal { position: fixed; z-index: 101; top: 33%; left: 25%; width: 50%; }
#shade { background: silver; opacity: 0.5; filter: alpha(opacity=50); }
</style>
</head>
<body>
<div id="shade"></div>
<div id="modal">
<textarea rows="5" cols="25"></textarea>
<button id="close">Close</button>
</div>
<p>
<button id="start">Start</button>
</p>
<script type="text/javascript">
var modal= document.getElementById('modal');
var shade= document.getElementById('shade');
document.getElementById('start').onclick= function() {
modal.style.display=shade.style.display= 'block';
};
document.getElementById('close').onclick= function() {
modal.style.display=shade.style.display= 'none';
};
// This code is a workaround for IE6's lack of support for the
// position: fixed style.
//
if (!('maxHeight' in document.body.style)) {
function modalsize() {
var top= document.documentElement.scrollTop;
var winsize= document.documentElement.offsetHeight;
var docsize= document.documentElement.scrollHeight;
shade.style.height= Math.max(winsize, docsize)+'px';
modal.style.top= top+Math.floor(winsize/3)+'px';
};
modal.style.position=shade.style.position= 'absolute';
window.onscroll=window.onresize= modalsize;
modalsize();
}
</script>
</body>
</html>
Il existe différents améliorations que vous pouvez faire à partir de là, comme les hacks iframe pour corriger IE-indexing IE, ou l'encapsuler dans un objet réutilisable, mais c'est la façon dont c'est fait.
jQueryUI a un plugin de dialogue modale. Il ne libérera pas le contrôle simplement en cliquant sur l'arrière-plan, comme vous avez demandé: http://jqueryui.com/demos/dialog/#modal
<a href="#" class="showModal">Show Modal Box</a>
<div id="modalContents" style="display:none;">
<textarea>Hello World</textarea>
</div>
-
$(".showModal").click(function(e){
e.preventDefault();
$("#modalContents").dialog({bgiframe: true, height: 140, modal: true});
});
a Une fenêtre modale nécessite par définition une action de l'utilisateur avant de pouvoir être renvoyée dans la fenêtre principale. Donc ce que vous cherchez n'est pas un modal mais une fenêtre.
il a besoin d'un textarea sur modal - popup –
html5 sur le chrome a l'élément <dialog>. Faites l'expérience avec elle
HTML:
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
CSS:
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
JS:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Merci je vais regarder dans ce que vous avez indiqué .... – Hulk
@bobince .. Salut monsieur J'ai utilisé cet exemple dans mon application, mon application contient un port de vue et un fond image. Chaque fois que j'ai cliqué sur le bouton de démarrage, il ne devrait pas y avoir de défilement et aussi modal devrait être au centre après le défilement aussi modal devrait être au centre. Mais je reçois modal sur le dessus seulement .. – Mallikarjun
Impressionnant de voir enfin une réponse non-jquery, j'ai pris la liberté de mettre votre code dans un objet javascript, http://jsfiddle.net/orwellophile/yWMdv/ – Orwellophile