以下代码有什么区别吗？
$('#whatever').on('click', function() {
/* your code here */
});
和
$('#whatever').click(function() {
/* your code here */
});
我当时希望使用Twitter Bootstrap Modal窗口作为局部视图.但是,我并不认为它的设计是以这种方式使用的; 它似乎意味着以相当静态的方式使用.尽管如此,我认为能够将其用作局部视图会很酷.
例如,假设我有一个游戏列表.点击给定游戏的链接后,我想从服务器请求数据,然后在"当前页面顶部"的模态窗口中显示有关该游戏的信息.
我做了一些研究,发现这个帖子类似但不完全一样.
有没有人尝试过成功或失败？任何人都有jsFiddle或他们愿意分享的某些来源？
谢谢你的帮助.
我有一个页面显示当地咖啡馆的列表.当用户点击某个咖啡馆时,会显示一个模式对话框,该对话框已经预先填写了"咖啡馆名称".该页面包含许多咖啡馆名称,表单应包含他点击的"咖啡馆名称".
以下是使用链接按钮生成为文本的咖啡馆名称列表
<table class="table table-condensed table-striped">
<tbody>
<tr>
<td>B&Js
</td>
<td>10690 N De Anza Blvd </td>
<td>
<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
</td>
</tr>
<tr>
<td>CoHo Cafe
</td>
<td>459 Lagunita Dr </td>
<td>
<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
</td>
</tr>
<tr>
<td>Hot Spot Espresso and Cafe
</td>
<td>1631 N Capitol Ave </td>
<td>
<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
</td>
</tr>
</tbody>
</table>
这是模态形式
<div class="modal hide fade" id="createFormId"">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3>Create Announcement</h3>
</div> …我有一个数据库中的预设电子邮件列表."感谢您成为会员","感谢您在途中购买它" - 这样的东西.我正在使用Bootstrap模式来编辑这些电子邮件.当我单击编辑按钮时,模态下降,并填充数据库中的数据:电子邮件名称,主题,正文.我正在使用传递数据到bootstrap模式来完成此任务.效果很好.现在我使用summernote作为我的富文本编辑器.
这是我的textarea,显示未编辑的数据:
<textarea class="summernote input-block-level" id="content" name="content" rows="18"></textarea>
类summernote是数据如何定向到输出文本区域,以便可以编辑它.编辑完数据后,我单击"提交",然后使用下面的代码将数据提取到JavaScript.
$(document).ready(function()
{
$('button[id=editEmail]').on('click', function()
{
var $email_edbody_array = $('textarea[name="content"]').html($('#summernote').code());
var $email_edbody = $email_edbody_array.html();
console.log("edited email" + $email_edbody);
有趣的是,如果summernote文本区域为空白,这可以正常工作 - 如果我创建一个新的电子邮件而不是编辑一个.本console.log应该输出编辑的电子邮件正文中,但事实并非如此.它输出原始的电子邮件正文.我不知道为什么.
将编辑好的电子邮件发送到我的JavaScript中我缺少什么.以下是我认为对此问题很重要的代码的主要部分.
此部分是页面的输出,以及编辑按钮的数据重定向.
<?php while ($datarow_emails = pg_fetch_assoc($results_emails))
{
echo "
<tr>
<td>".$datarow_emails['internal_name']."</td>
<td>".$datarow_emails['email_subject']."</td>
<td>".$datarow_emails['type']."</td>
<td>
<span class='btn btn-info btn-small open-editEmailModal' data-toggle='modal'
href='#editEmail' data-inm='".$datarow_emails['internal_name']."'
data-es='".$datarow_emails['email_subject']."'
data-bdy='".$datarow_emails['email_body']."'
data-ty=".$datarow_emails['type']."
data-ces=".$datarow_emails['canned_email_sid'].">
<i class='icon-edit icon-white'></i> Edit</span>
<span class='btn btn-danger btn-small open-delEmailModal' data-toggle='modal'href='#deleteWarning' data-ces=".$datarow_emails['canned_email_sid'].">
<i class='icon-remove icon-white'></i> Delete</span>
</td>
</tr>";
} …我有一个问题,我无法将任何参数传递给模态窗口(使用Bootstrap 3),我尝试使用此链接中所述的解决方案,但我无法使其工作:
(解决方案kexxcream用户).
但是按下按钮,显示屏不显示任何东西,显然是块,附上下面的图片:
http://i.imgur.com/uzRUyf1.png
我附上了代码(左上方的代码相同);
HTML代码:
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Title</h3>
</div>
<div class="modal-body">
<div id="modalContent" style="display:none;">
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
</div>
</div>
JS代码:
$("a[data-toggle=modal]").click(function()
{
var essay_id = $(this).attr('id');
$.ajax({
cache: false,
type: 'POST',
url: 'backend.php',
data: 'EID='+essay_id,
success: function(data)
{
$('#myModal').show();
$('#modalContent').show().html(data);
}
});
});
按钮:
<a href='#myModal' data-toggle='modal' id='2'> Edit </a>
PHP代码(backend.php):
<?php
$editId = $_POST['EID'];
?>
<div class="jumbotron">
<div class="container">
<h1>The …我正在研究"添加链接"功能.为此,我正在使用Twitter Boostrap JS的Modal插件.在主页面上只有要填充的"链接"字段,当用户点击"添加链接"按钮时,会弹出一个模式,用户会看到完整的表单以填充3个字段:链接,标题,标签.但是,我希望链接字段预先填充上一步的值.它与您在delicious.com上保存链接时发生的情况类似.
感谢Joe的帮助(上一个问题)我可以在模态对话框上打印linkURL,但重要的是此linkURL是带有3个字段(链接,标题,标签)的表单的链接字段的值.知道如何做到这一点？谢谢!
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></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>
<!-- The Modal Dialog -->
<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">
<!--
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>"
<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>
</form>
-->
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Add Link</a>
</div>
</div>
<div class="container"> …我有一个自定义复选框.我想要的是在选中复选框时打开引导模式.我想要一个bootstrap模式打开就像点击一个按钮一样.希望你理解我的问题.我该怎么做.
/*
----------------------------------------------
CHECKBOX
----------------------------------------------
*/
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:checked+label:before {
content: '';
position: absolute;
left: 0;
top: 0px;
width: 20px;
height: 20px;
//border: 1px solid #aaa;
background: #09ad7e;
border-radius: 3px;
//box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
[type="checkbox"]:not(:checked)+label:before {
content: '';
position: absolute;
left: 0;
top: 0px;
width: 20px;
height: 20px;
//border: 1px …我试图通过单击ActionLink并传递如下参数来在同一页面上打开我的引导模式:
@foreach (Items item in Model)
{
@Html.ActionLink("Download", "#", new { data-id = '@item.Name' } )
}
//Modal
<div id="dModal" class="modal hide fade" aria-hidden="true">
<div class="modal-body">
@using (Html.BeginForm("getCSV", "Download", new { filename = data-id }, FormMethod.Post, null))
{
<button id="btnCSV" type="submit">Download CSV</button>
}
//other options for excel, word etc
</div>
</div>
在ActionLink中,我将actionName参数保留为#,这是因为模式位于同一页面上,当用户选择模态中的选项时,将决定操作.不直接调用下载操作方法的原因是因为用户可以选择以各种格式下载excel,csv等.
我有一个包含大量数据的表,并且我在每行的末尾放置了一个按钮,我想用它来触发模态并将该行的唯一ID传递给模态.
我找到了这个答案:将数据传递给bootstrap模式
但它似乎不适用于Bootstrap 3,我找不到任何想法的任何数据？
我使用的是相同的代码:
标题:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<link href = "bootstrap/css/styles.css" rel = "stylesheet">
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val(myBookId);
});
</script>
</head>
身体:
<a data-toggle="modal" data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
莫代尔:
<div class="modal" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="bookId" id="bookId" value="" />
</div>
</div>
结果页面将打开模态,但文本字段为空.
我忘了提,我确实加载了jquery和bootstrap:
<script …<a class="my_link" data-val="user1" href="#">modal link</a>
我有这个链接打开一个bootstrap模式,但我需要传递数据属性"data-val".我尝试使用javascript,但我没有得到它.你能帮我么？
jquery ×6
modal-dialog ×6
javascript ×4
html ×3
asp.net-mvc ×2
checkbox ×1
click ×1
css ×1
summernote ×1
window ×1