如何用文本框打开javascript弹出窗口

时间:2016-11-14 04:52:52

标签: javascript

我的项目中的任务是在html中打开弹出到javascript只有点击链接然后打开弹出窗口和文本框内的超链接

<!DOCTYPE html>

<html>
    <head>
        <title>JavaScript Demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="somnath.js" type="text/javascript"></script>
    </head>
    <body>
    <a href="#" id="somnath"> Click Here Me</a>

    </body>
    </htm

3 个答案:

答案 0 :(得分:3)

你在找这个吗?

&#13;
&#13;
function pop() {
    prompt("Enter something!", "Text");
}
&#13;
<button onclick="pop()">Click</button>
&#13;
&#13;
&#13;

<强>更新

检查

&#13;
&#13;
function pop() {
    var popup = document.getElementById('myPopup');
    popup.classList.toggle('show');
}
&#13;
.popup {
    display: inline-block;
}
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #b1b1b1;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 20px;
    position:relative;
    top:50px;
    right:150px;
}
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}
&#13;
<div style="text-align:center;">
  <a href="#" onclick="pop()">Click</a>
  <div class="popup">
    <span class="popuptext" id="myPopup">
      Enter your name: <input type="text" />
    </span>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您的HTML文件应该是这样的,

<html>
<head>
<title>JavaScript Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="somnath.js" type="text/javascript"></script>
</head>
<body>
<button onclick="myFunction()">Click Here Me</button>
</body>
</html>

应该有一个名为somnath.js和内容的js文件,

function myFunction() {
    prompt("You can enter your text below", "Text");
}

答案 2 :(得分:1)

这是javascript中的一个小模式。这需要jQuery

$(document).ready(function() {

$('#emailModal').dialog({
    modal: true,
    autoOpen: false,
    title: "Enter your information",
    buttons: {
        "Send": function() {
            $('#emailPost2').submit();
            $(this).dialog("close");
        }
    }
});

// Show the modal form when clicked.
$('#emailJQButton').click(function() {
    $("#emailModal").dialog('open');
});

});

DEMO