如何将文本字段传播到模态对话？ [英] How to propagate the text field to the modal dialogue?
问题描述
我正在尝试为我的网站添加一个链接功能。为此，我使用Twitter Boostrap JS的 Modal插件。在主页面上只有'链接'字段可供填写，当用户点击'添加链接'按钮时，弹出一个模式，用户可以看到完整的表格填写：链接，标题，标签。但是，我希望链接字段预填充上一步中的值。这与在delicious.com上保存链接时发生的情况类似。然而，问题是当我在模态对话框中插入一个JavaScript时，模态对话框停止工作。任何想法如何解决这个问题？非常感谢！
< html>
< head>
< title>示例< / title>
< link rel =stylesheethref =scripts / bootstrap.min.css>
< link rel =stylesheethref =main.css/>
< / head>
< body>
<！ - 模态对话框 - >
< div id =modal-from-domclass =modal hide fade>
< div class =modal-body>
< form id ='post-on-wall'method ='POST'action ='savePost.php'enctype ='multipart / form-data'>
Peter
< script type =text / javascript>
var linkURL = $（'＃linkURL'）。val（）;
//document.write(\"<input type ='text'class ='label-inline'name ='linkURL'id ='wall-post'value = linkURL>）;
document.write（linkURL）;
< / script>
< button type ='submit'class ='btn'>添加链接< / button>
< / form>
< / div>
< / div>
< / div>
< div class =container>
< div class =wall-post>
< button data-controls-modal =modal-from-domdata-backdrop =staticclass =btn>添加链接< / button>
< / div>
< / div>
< script src =scripts / jquery.min.js>< / script>
< script src =scripts / bootstrap-modal.js>< / script>
< / body>
有几件小事阻止您的脚本工作阿尔曼。
首先，您需要在标题中加载jquery和引导脚本。浏览器在加载页面时解释页面，当浏览器点击$（＃linkURL）时，它不知道该如何处理它。
第二点是你只能知道用户输入到LinkURL框中的内容，当他们点击添加链接按钮时。因此，您只能在此之后真正填充模式框。
鉴于此，您可以利用活动，模型库会为您填充此内容。
如果将这些放在一起，你得到这个：
< html>
< head>
< title>示例< / title>
< script src =scripts / jquery.min.jstype =text / javascript>< / script>
< script src =scripts / bootstrap-modal.jstype =text / javascript>< / script>
< link rel =stylesheethref =scripts / bootstrap.min.css>
< link rel =stylesheethref =main.css>
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃modal-from-dom'）。bind（'show'，function（）{
$ （.modal-body）。html（$（＃linkURL）.val（））;
}）;
}）;
< / script>
< / head>
< body>
< div id =modal-from-domclass =modal hide fade>
< div class =modal-header>
< a href =＃class =close>& times;< / a>
< h3>添加链接< / h3>
< / div>
< div class =modal-body>
< / div>
< div class =modal-footer>
< a href =＃class =btn primary>添加链接< / a>
< / div>
< / div>
< / body>
< / html>
然后你只需要修改一下内容，你应该是正确的！ p>
I'm trying to 'add a link' functionality to my site. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill: link, title, tags. However, I want the link field to be pre-filled with the value from the previous step. It's similar to what happens when you 'save a link' on delicious.com.
However, the problem is that when I insert a javascript inside the modal dialog, the modal dialog stops working. Any ideas how to get around this problem? Thank you very much!
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- The Modal Dialog -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-body">
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>
Peter
<script type="text/javascript">
var linkURL = $('#linkURL').val();
//document.write("<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>");
document.write(linkURL);
</script>
<button type='submit' class='btn'>Add Link</button>
</form>
</div>
</div>
</div>
<div class="container">
<div class="wall-post">
<textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
<button data-controls-modal="modal-from-dom" data-backdrop="static" class="btn">Add Link</button>
</div>
</div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
</body>
There's a couple of little things preventing your script from working Arman.
The first is you need to load your jquery and bootstrap scripts in the header. The browser interprets the page as it loads, and when the browser hits the bit that says $("#linkURL") it doesn't know what to do with it.
The second bit is you can only know the content that the user has entered into the LinkURL box, when they click the "Add Link" button. Therefore, you can only really populate the modal box after that.
Given this, you can leverage the Events that the model library presents to populate this for you.
If you put this all together, you get this :
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap-modal.js" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript">
$(document).ready(function(){
$('#modal-from-dom').bind('show',function(){
$(".modal-body").html($("#linkURL").val());
});
});
</script>
</head>
<body>
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close">×</a>
<h3>Add Link</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Add Link</a>
</div>
</div>
<textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Add Link</button>
</body>
</html>
Then you just need to modify the content a bit, and you should be right to go!
这篇关于如何将文本字段传播到模态对话？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
