创建一个弹出

我是真正的菜鸟，我想学习，但我被困在创建弹出..创建一个弹出

这是我的代码

<!DOCTYPE html> 
<html lang="en"> 
    <link rel="shortcut icon" href="https://sols-rpg.com/home/favicon.png" type="image/x-icon"/> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="viewport" content="height=device-height, initial-scale=1"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 
     <title>LA-RP - Home</title> 
     <script type="text/javascript"> 
     //<![CDATA[ 
     try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){}; 
     //]]> 
     </script> 
     <link href="css/main.css" rel="stylesheet"> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="border-bottom: #0d79c9 3px solid;"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <div class="navbar-logo"><img src="img/logov3.png"></div> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right" style="margin-top:6px;"> 
        <li> 
        <a href="https://la-rp.ro/" style="color:#fff;"> <span class="glyphicon glyphicon-home"></span> <b>Acasa</b></a> 
        </li> 
        <li> 
        <a href="https://la-rp.ro/forum/"> <span class="glyphicon glyphicon-globe"></span> <b>Forum</b></a> 
        </li> 
        <li> 
        </li> 
        <li> 
        <a href="https://la-rp.ro/marketplace/"> <span class="glyphicon glyphicon-shopping-cart"></span> <b>Magazin</b></a> 
        </li> 
        <li> 
        <a href="https://la-rp.ro/info/"> <span class="glyphicon glyphicon-info-sign"></span> <b>Anunturi</b></a> 
        </li> 
       </ul> 
      </div> 
     </div> 
     </nav> 
     <div class="banner"> 
     <h1>Bine ai venit pe <font style="color:#0d79c9;">Los Angeles Roleplay</font>!</h1> 
     <h6><b>Serverul este bazat pe viata din Los Angeles.</b></a>.</h6> 
     <h6><b><font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font> Mai multe informatii pe <font style="color:#0d79c9;">forum</font>! <font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font></b></a></h6> 
     <div class="spacer1"> </div> 
     <div class="spacer1"> </div> 
     <button id="popup" onclick="div_show()"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button>&nbsp;&nbsp;<a href="http://la-rp.ro/forum/ucp.php?mode=login"><button class="btn-transparent"><span class="glyphicon glyphicon-share-alt"></span> Logheaza-te</button></a><br> 
     <div class="spacer1"> </div> 
     <a href="samp://tobeadded"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-play"></span> Conecteaza-te</button></a> 
     <div class="spacer1"> </div> 
     <a href="http://files.sa-mp.com/sa-mp-0.3.7-install.exe"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-cloud-download"></span> Descarca SA-MP</button></a> 
     <div class="spacer1"> </div> 
     <a href="ts3server://89.40.70.173:9006"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-headphones"></span> Vorbeste pe TeamSpeak</button></a> 
     <div class="footer"> 
      <a href="https://www.positivessl.com"><img src="img/comodo_secure_seal_113x59_transp.png" align="left"/> 
      <a href="https://www.youtube.com/channel/UCAo06xj30A85GCvenFv8o0w"><img src="img/ytbutton.png" align="right" hspace="5"/> <a href="https://www.facebook.com/roleplaylarp/"><img src="img/fbbutton.jpg" align="right"/></a> 
      <p> 
       Copyright &copy; Los Angeles Roleplay 2017 
     </div> 
     </div> 
     <script src="js/jquery.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

按下此按钮

时，我想

<button id="popup" onclick="div_show()"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button>

弹出窗口会出现一个漂亮的动画在用户屏幕上，背景会变得有点模糊，我想在弹出窗体中放置一个窗体，但是我需要的只是弹出窗体。

我做了一个弹出窗口和一个phpscript来将输入发送到我的电子邮件，但它不工作，我没有收到任何电子邮件。

<?php 
$your_email ='[email protected]';// <<=== update to your email address 

session_start(); 
$errors = ''; 
$name = ''; 
$visitor_email = ''; 
$nastere = ''; 
$forumname = ''; 
$parola = ''; 
$poveste = ''; 
$mgpg = ''; 

if(isset($_POST['submit'])) 
{ 

    $name = $_POST['field5']; 
    $visitor_email = $_POST['field4']; 
    $nastere = $_POST['field2']; 
    $forumname = $_POST['field1']; 
    $parola = $_POST['field3']; 
    $poveste = ['field6']; 
    $mgpg = ['field7']; 
    ///------------Do Validations------------- 
    if(empty($name)||empty($visitor_email)) 
    { 
     $errors .= "\n Name and Email are required fields. "; 
    } 
    if(IsInjected($visitor_email)) 
    { 
     $errors .= "\n Bad email value!"; 
    } 
    if(empty($_SESSION['6_letters_code']) || 
     strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0) 
    { 
    //Note: the captcha code is compared case insensitively. 
    //if you want case sensitive match, update the check above to 
    // strcmp() 
     $errors .= "\n The captcha code does not match!"; 
    } 

    if(empty($errors)) 
    { 
     //send the email 
     $to = $your_email; 
     $subject="Creare caracter $name"; 
     $from = $your_email; 
     $ip = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : ''; 

     $body = "A user $forumname submitted the contact form:\n". 
     "Nume Forum: $forumname\n". 
     "Email: $visitor_email \n". 
     "IP: $ip\n"; 
     "Nume Caracter: $name\n ". 
     "Parola: #parola\n". 
     "Data Nasterii: $nastere\n". 
     "Poveste Caracter:\n $poveste \n". 
     "Definitii MG si PG:\n $mgpg ". 

     $headers = "From: $from \r\n"; 
     $headers .= "Reply-To: $visitor_email \r\n"; 

     mail($to, $subject, $body,$headers); 

     header('Location: thank-you.html'); 
    } 
} 

// Function to validate against any email injection attempts 
function IsInjected($str) 
{ 
    $injections = array('(\n+)', 
       '(\r+)', 
       '(\t+)', 
       '(%0A+)', 
       '(%0D+)', 
       '(%08+)', 
       '(%09+)' 
      ); 
    $inject = join('|', $injections); 
    $inject = "/$inject/i"; 
    if(preg_match($inject,$str)) 
    { 
    return true; 
    } 
    else 
    { 
    return false; 
    } 
} 
?> 

<!DOCTYPE html> 
<html lang="en"> 
<link rel="shortcut icon" href="https://sols-rpg.com/home/favicon.png" type="image/x-icon"/> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="viewport" content="height=device-height, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 
<title>LA-RP - Home</title> 
<script type="text/javascript"> 
//<![CDATA[ 
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){}; 
//]]> 
</script> 
<link href="css/main.css" rel="stylesheet"> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="border-bottom: #0d79c9 3px solid;"> 
<div class="container"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<div class="navbar-logo"><img src="img/logov3.png"></div> 
</div> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
<ul class="nav navbar-nav navbar-right" style="margin-top:6px;"> 
<li> 
<a href="https://la-rp.ro/" style="color:#fff;"> <span class="glyphicon glyphicon-home"></span> <b>Acasa</b></a> 
</li> 
<li> 
<a href="https://la-rp.ro/forum/"> <span class="glyphicon glyphicon-globe"></span> <b>Forum</b></a> 
</li> 
<li> 
</li> 
<li> 
<a href="https://la-rp.ro/marketplace/"> <span class="glyphicon glyphicon-shopping-cart"></span> <b>Magazin</b></a> 
</li> 
<li> 
<a href="https://la-rp.ro/info/"> <span class="glyphicon glyphicon-info-sign"></span> <b>Anunturi</b></a> 
</li> 
</ul> 
</div> 
</div> 
</nav> 
<div class="banner"> 
<h1>Bine ai venit pe <font style="color:#0d79c9;">Los Angeles Roleplay</font>!</h1> 
<h6><b>Serverul este bazat pe viata din Los Angeles.</b></a>.</h6> 
<h6><b><font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font> Mai multe informatii pe <font style="color:#0d79c9;">forum</font>! <font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font></b></a></h6> 
<div class="spacer1"> </div> 
<div class="spacer1"> </div> 
<button id="show" onclick="div_show()" class="btn-transparent"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button>&nbsp;&nbsp;<a href="http://la-rp.ro/forum/ucp.php?mode=login"><button class="btn-transparent"><span class="glyphicon glyphicon-share-alt"></span> Logheaza-te</button></a><br> 
<div class="spacer1"> </div> 
<a href="samp://tobeadded"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-play"></span> Conecteaza-te</button></a> 
<div class="spacer1"> </div> 
<a href="http://files.sa-mp.com/sa-mp-0.3.7-install.exe"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-cloud-download"></span> Descarca SA-MP</button></a> 
<div class="spacer1"> </div> 
<a href="ts3server://89.40.70.173:9006"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-headphones"></span> Vorbeste pe TeamSpeak</button></a> 
<div class="footer"> 
<a href="https://www.positivessl.com"><img src="img/comodo_secure_seal_113x59_transp.png" align="left"/> 
<a href="https://www.youtube.com/channel/UCAo06xj30A85GCvenFv8o0w"><img src="img/ytbutton.png" align="right" hspace="5"/> <a href="https://www.facebook.com/roleplaylarp/"><img src="img/fbbutton.jpg" align="right"/></a> 


<dialog id="window"> 
    <form class="form-style-9"> 
<ul> 
<li> 
    <input type="text" name="field1" class="field-style field-split align-left" placeholder="Nume Forum" /> 
    <input type="text" name="field2" class="field-style field-split align-right" placeholder="Data Nasterii" /> 

</li> 
<li> 
    <input type="text" name="field3" class="field-style field-split align-left" placeholder="Parola" /> 
    <input type="email" name="field4" class="field-style field-split align-right" placeholder="Email" /> 
</li> 
<li> 
<input type="text" name="field5" class="field-style field-full align-none" placeholder="Nume_Prenume" /> 
</li> 
<li> 
<textarea name="field6" class="field-style" placeholder="Poveste Caracter"></textarea> 
</li> 
<li> 
<textarea name="field7" class="field-style" placeholder="Defineste ce inseamna Metagaming si Powergaming plus exemple"></textarea> 
</li> 
<li> 
<input type="submit" name="submit" value="TRIMITE" /> 
</li> 
</ul> 
</form> 
    <button id="exit" class="btn-transparent">Close Dialog 
</dialog> 
</div> 

<p class="copyright">Copyright &copy; Los Angeles Roleplay 2017</p> 

</div> 
</div> 
<script src="js/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/my_js.js"></script> 
<script src="scripts/gen_validatorv31.js"></script> 
<script src="scripts/validationAndCaptcha.js"></script> 
</body> 
</html>

来源

2017-01-10 Andrei Civili

你在找什么叫** **模型**或**对话框**，许多JS框架提供他们的服务来创建这些，如果你想创建自己的你可以看看这里http：// www.w3schools.com/howto/howto_css_modals.asp – Jek

你已经包含Bootstrap，所以阅读文档。 http://getbootstrap.com/javascript/#modals – ceejayoz

下面是自举模式与简单的按钮点击弹出：参考link以获取更多信息。

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>

来源

2017-01-10 03:11:23 Ravistm

首先，确保您将这两个引用保留在文档头部的脚本代码中，这是不好的做法。

<script src="js/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script>

您可以在线查看示例以制作您自己的原型。如果你想了解所有关于HTML全局的知识（或者至少是你正在制作的参考文献），请务必查看this site。

这是我会怎样称呼我的文档标题：因为我认为自己是有些足智多谋，我会建议做纯JavaScript + CSS，没有额外的库，除非你希望

<head> 
    <title> // 1x Title Tag 
    <meta> // Subsequently, meta tags 
      // which honestly I have not much experience using and I 
     // assume are for dynamic styling on mobile devices, and SEO 
    <link href> // link tags to css 
    // and finally 
    <script src="js/jquery.js"></script> // script tags 
    <script src="js/bootstrap.min.js"></script> // and script code 
    <script type="text/javascript"> 
//<![CDATA[ 
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){}; 
//]]> 
    </script> 
</head>

在将来你自己写一个。像其他人一样，你可以用jQuery来做到这一点。

虽然我通常不建议W3Schools的，这里是另一种方式来做到这一点：http://www.w3schools.com/howto/howto_css_modals.asp

也许你想了解他们是如何做到这一点，并最终将他们智胜。如果您仍然好奇，请在我的帖子中添加评论，这样我就可以知道将您链接到CSS教程或HTML跟随。

来源

2017-01-10 03:29:14 phenominas

如果我将它们添加到头部，javascripts不再工作。 –

也许你正在试图在文档完全加载之前运行函数。参考[“HTML中的HTML头，innerhtml不工作”]（http://stackoverflow.com/questions/9849204/javascript-in-html-head-innerhtml-not-working#9849217） – phenominas

另外，因为我可以'对你的帖子发表评论，因为我没有50的声望，请检查这个链接。 [“关于提交留在同一页面上”]（http://stackoverflow.com/questions/17333901/php-form-on-sumbit-stay-on-same-page） - 您忘记将该方法添加到您的表单标签。 – phenominas

创建一个弹出

回答

相关问题