javascript - 如何用两个按钮控制同一个对话框 而第二个对话框里面标题不一样?
大家讲道理
大家讲道理 2017-04-10 16:02:42
0
3
442

斜体文字

<p class="modal fade"id="" role="dialog">

<p class="modal-dialog">
    <p class="modal-content">
        <p class="modal-header">
            <h3>标题1</h3>
            <button type="button"class="close" data-dismiss="modal">&times;</button>
        </p>
        <p class="modal-body">
               内容
        </p>
        <p class="modal-footer">
            <button type="button" class="button  blue">是</button>
            <button type="button" class="button white" data-dismiss="modal">否</button>
        </p>
    </p>

比如我点击另外一个按钮是标题改变内容不变,modal-footer按钮也要改变变怎么做?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

répondre à tous(3)
伊谢尔伦

我用jQuery写点代码勿喷
因为不知道你要什么效果,这就是最简单的根据不同的按钮显示不同的标题和按钮,主要思想就是,找到dialog中相应的元素,并且改变他们的html内容

$("btn1").click(function(){
    var _d=$(".modal-dialog");
    _d.find("h3").html("btn1");
    _d.find(".modal-footer").find("input").each(function(i,v){
        v.html("btn1//"+i);
    });
});
$("btn2").click(function(){
    var _d=$(".modal-dialog");
    _d.find("h3").html("btn2");
    _d.find(".modal-footer").find("input").each(function(i,v){
        v.html("btn2//"+i);
    });
});
Peter_Zhu

最好的方式是将你这些UI组件进行封装,我这里写个简单的

var content = [
    '<p class="modal fade" role="dialog">',
    '<p class="modal-dialog">',
    '<p class="modal-content">',
    '<p class="modal-header">',
    '<h3></h3>',
    '<button type="button"class="close" data-dismiss="modal">&times;</button>',
    '</p>',
    '<p class="modal-body"></p>',
    '<p class="modal-footer">',
    '<button type="button" class="button blue">是</button>',
    '<button type="button" class="button white" data-dismiss="modal">否</button>',
    '</p>',
    '</p>'].join('');


function Dialog(options) {
    if (!(this instanceof Dialog))throw 'should new a dialog';

    options = options || {};

    var $el = $(content).appendTo('body');

    $el.find('.modal-header h3').html(options.title);
    $el.find('.modal-body').html(options.content);

    options.btns.forEach(function (btn, index) {
        var key = Object.keys(btn)[0];
        var onclick = btn[key];
        $el.find('.modal-footer button').eq(index).on('click', onclick);
    });

    $el.find('.close').on('click', function () {
        $el.remove();
    });
}

new Dialog({
    title: '标题一',
    content: '内容一',
    btns: [
        {
            '确定': function () {
                console.log(this);
            }
        },
        {
            '取消': function () {
            }
        }
    ]
});

new Dialog({
    title: '标题二',
    content: '内容二',
    btns: [
        {
            '提交': function () {

            }
        },
        {
            '关闭': function () {

            }
        }
    ]
});
迷茫

function changetitle(num){
switch(id){

        case 1:
        $('.modal-content').on('show.bs.modal', function (e) {
        //这里面去改变标题1的内容
         });
        break;
        case 2:
        $('.modal-content').on('show.bs.modal', function (e) {
        //这里面去改变标题1的内容
        });
        break;
  }

}

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!