实习日记--day11

最新推荐文章于 2024-09-11 11:28:25 发布

xpz的三级包

最新推荐文章于 2024-09-11 11:28:25 发布

阅读量356

点赞数 1

文章标签：实习前端 Jquery 模态框模态框传值

本文链接：https://blog.csdn.net/qq_40115021/article/details/94777274

版权

前端学习

模态框的简单应用及值传递
- 模态框的一个简单实例
- 模态框的值传递

模态框的简单应用及值传递

见者易，学者难。

模态框的一个简单实例

先上一个有关模态框应用的简单实例

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title>Bootstrap Modal</title>  
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">  
</head>  
<body>  
  
  
<div class="panel panel-default">  
    <div class="panel-heading">my friend</div>  
    <div class="panel-body">  
        <div class="list-group" role="group" aria-label="my friend">  
            <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"  
                    data-whatever="ergouzi">ergouzi  
            </button>  
            <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"  
                    data-whatever="liuchen">liuchen
            </button>  
            <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"  
                    data-whatever="hualili">hualili 
            </button>
            <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"  
                    data-whatever="hualili">mazi
            </button>
			<button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"  
			        data-whatever="hualili">suancai
			</button>  
        </div>  
    </div>  
</div>  
  
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">  
    <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">×</span></button>  
                <h4 class="modal-title" id="exampleModalLabel">New message</h4>  
            </div>  
            <div class="modal-body">  
                <form>  
                    <div class="form-group">  
                        <label for="recipient-name" class="control-label">Recipient:</label>  
                        <input type="text" class="form-control" id="recipient-name">  
                    </div>  
                    <div class="form-group">  
                        <label for="message-text" class="control-label">Message:</label>  
                        <textarea class="form-control" id="message-text"></textarea>  
                    </div>  
                </form>  
            </div>  
            <div class="modal-footer">  
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                <button type="button" class="btn btn-primary">Send message</button>  
            </div>  
        </div>  
    </div>  
</div>  
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  

</body>  
</html>

1-33行
在这里插入图片描述（33行还有一个</div>没有显示出来）
36-67行
运行结果如下

点击其中的任何一行都会弹出一个窗口，这个窗口或者说是子页面更准确，就是所谓的模态框（Modal），它是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。效果如下：
在这里插入图片描述
模态框的用途很广泛，可以实现很多的功能，比如这里要实现的功能就是向你好友列表中的一个好友发消息，我们可以在模态框里加入两个输入框，一个是你要发送消息的好友的名字，另外一个就是你要发送的消息内容。
可以发现，在现在这个小小的实例里，无论我们点击哪个按钮，出现的模式款都是同一个，实际在代码中也是一样，如果我们想直接通过点击不同的按钮来确定要发送信息的对象而不是通过在模态框中再输入一边来实现我们要怎么做呢？

模态框的值传递

要想知道在弹出模态框之前我们选择的是哪个朋友的按钮，我们就必须在这个过程中把这个信息保存下来，并且以一个值的形式传给模态框，这样我们才能在模态框中利用这个信息来确定你到底要跟哪个朋友发送消息。
我们具体该怎么做呢？
先上代码，实现之后再来说明其中的细节

<script>
     //绑定模态框展示的方法 
    $('#exampleModal').on('show.bs.modal', function (event) {  
        var button = $(event.relatedTarget) // 触发事件的按钮  
        var recipient = button.data('whatever') // 解析出whatever内容  
        var modal = $(this)  //获得模态框本身
        modal.find('.modal-title').text('Message To ' + recipient)  // 更改将title的text
        modal.find('.modal-body input').val(recipient)  
    })  
</script>

我们在上面那个程序的64行后面加上上面这段代码
在这里插入图片描述
点击运行后，我们再点击一个按钮，比如"ergouzi"，Recipient框中就会直接显示我们刚才点击的那个朋友的名字了，这样就实现了我们要的功能。

那么这段代码为什么就能确定我们之前按下的是哪个按钮呢？这些按钮的属性在HTML里不是完全一样吗？这里就要说到Jquery插件库提供的一个库函数
event.relatedTarget了，这个函数的返回值是一个element类型，借助这个类型我们可以获得任何类型的HTML元素，在这个实例里我们获得了我们之前所点击的那个button，那这个函数为什么可以获得这个button呢？这是因为relatedTarget相应的事件是mouseover和mouseout。其中mouseover事件是在鼠标指针位于元素上方时触发，而mouseout事件是在鼠标指针离开某个元素时触发。

对于 mouseover 事件来说，该属性指向的是鼠标指针移到目标节点上时所离开的那个节点。
对于 mouseout 事件来说，该属性指向的是离开目标时，鼠标指针进入的节点。
对于其他类型的事件来说，这个属性没有用。

在显示模态框的这个过程中，我们点击按钮时鼠标是在按钮上的，这时触发mouseover事件，所以event.relatedTarget指向的是鼠标指针移到目标节点上时所离开的那个节点，由于弹出了模态框，我们的鼠标指针已经不在原来的按钮上了，所以原来的那个按钮就是我们离开的那个节点，所以这里event.relatedTarget的返回值就是我们之前点击的那个button，我们只需要定义一个对象来保存它即可，这样我们就可以利用这个button中的信息来确定我们要发送消息的朋友是谁了。
莫将容易得，便作等闲看。